淺談 css 之 position用法

標籤：之間   html   css   沒有   包含   根據   覆蓋   lock   區別   

　　在 css中, position 屬性有四個值可用: static(預設值)、absolute、relative、fixed。

　　relative:相對定位(相對於自身進行在常規流中的位置進行定位，保留自身原始的位置)

　　absolite:

　　　　1、相對於自身的包含塊定位；
　　　　2、尋找包含塊的規則：從自身網上尋找祖先元素，尋找到的第一個position為非static修飾的祖先元素的內邊距邊界 就是當前絕對位置元素的包含塊；如果沒有的話，則相對於 html進行定位；
　　　　3、完全脫離文檔流；
　　　　4、display的取值更改為inline-block；
　　　　5、不縮短行框

　　fixed:

　　　　完全脫離文檔流，和 absolute 的唯一的區別就在於：absolute元素是根據最近的定位上下文確定位置，而fixed永遠根據瀏覽器確定位置。即使視窗是滾動的它也不會移動 

　　說到 position，就要再說一下 [Z-index] (垂直定位)

　　Z-index 預設值為0；這種情況下，後者會覆蓋前者，需要改變元素之間層級關係的話，就要通過改變 Z-index 值來實現了，Z-index值越大優先順序就越高。

 

淺談 css 之 position用法