?????? 牛腩新聞發不系統中遇到了CSS（Cascading style sheets），第一次接觸，比較陌生還！因為CSS很多關于元素定位的問題，并且很多情況下元素的位置以像素精度計。一個不小心就很頭疼，為此還是很有必要了解一下元素的定位機制。那么在介紹定位機制之前呢，還是有必要先了解一些和位置有關的基本內容。

???????第一個需要了解的是盒子模型，在網頁中所有的元素都是以盒子模型的方式存在的，即所有元素都可以看成是大小不一樣的矩形“磚頭”。在IE和Firefox中的開發人員工具中可以很直觀的看到每個元素的盒子模型。ok了，有了以上的基本理解那么可以開始了。

???????在css中定位機制包括：標準流，定位和浮動

???????標準流：除非專門指定，否則所有元素都在標準流中定位。也就是說，標準流中的元素的位置由元素在HTML中的位置決定。塊級元素從上到下一個接一個地排，列行內框在一行中水平布置。很明顯這樣生硬的規定是不靈活的，好比你玩俄羅斯方塊不讓你變換元素的方向直接堆放一樣。所以，也就有了定位。

???????定位：又分為相對定位和絕對定位。

???????相對定位是指將元素從標準流中移動出來，即相對于它原來的位置進行偏移。但是它依然在標準流中占據著它原來的位置，因此相對其他元素而言它還是在原來的位置上。因此，偏移后的元素也就會覆蓋在其他的元素上！那么實例代碼如下，其效果如圖：

#box_relative {position: relative; /*relative是相對定位的關鍵字*/left: 30px;top: 20px; }

?

????????絕對定位的思想是和相對定位是一樣的，即移動某個元素使其出現在獨立于標準流之外的地方。而區別則在于，絕對定位不再在標準流中保存元素原來的位置。也就是說，在其他元素來看它是不存在的，它移動之后原來的位置將被別的元素取代。其代碼如下，效果如圖：

#box_relative {position: absolute;/*absolute為絕對定位關鍵字*/left: 30px;top: 20px; }

?

?????? 這里因為定位的原因出現的元素覆蓋的問題，Css還提供了一個屬性Z-index來調整元素的疊放次序。

???????浮動：浮動是指把元素從表準流中獨立出來，向左或者向右移動直到碰到另一個元素的邊框。因為其脫離了標準流，那么在其他元素看來它就不存在了，于是它的位置會被頂替。如圖所示：

?

?

?

?

??? 本篇博客到此結束，關于CSS的東西估計還需要再寫一篇博客！

?

總結

以上是生活随笔為你收集整理的css的定位机制的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。