position 屬性規定元素的定位類型。
說明:這個屬性定義建立元素布局所用的定位機制。任何元素都可以定位,不過絕對或固定元素會生成一個塊級框,而不論該元素本身是什么類型。相對定位元素會相對于它在正常流中的默認位置偏移。
position的屬性值:
absolute:絕對定位,如果元素設置absolute,父級沒有設置absolute,fixed,relative,那么該元素會找到上一級有沒有這些定位元素,如果找到了,就會以該級元素為參照點定位,如果沒有找到,那么就以瀏覽器定位。脫離文檔流,定位的元素將會改變行塊的表現,行級元素設置絕對定位,可以設置寬高,塊級元素不會繼承父級寬度,表現和float一樣;
relative:相對定位,以自身為參照點進行偏移,不脫離文檔流,比較溫和,不會改變元素的默認表現,通常配合絕對定位使用。
fixed:固定定位,以瀏覽器為參照點進行偏移,脫離文檔流,也會改變行塊的標簽的表現,參考absolute;
static:默認值。沒有定位,元素出現在正常的流中;
z-index:用來提升定位元素的層級;z-index 屬性設置元素的堆疊順序。擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面。元素可擁有負的 z-index 屬性值。Z-index 僅能在定位元素上奏效
定位元素不設置z-index相當于為0;
注意:設置定位的元素再去設置浮動是沒有效果的。
設置定位元素的層級會提升,覆蓋沒有設置定位的元素,在定位元素都沒有設置z-index的前提下,后面的定位元素覆蓋前面的定位元素,如果設置了z-index,那么誰的值大,誰的層級高,誰就在最上層覆蓋其他的定位元素,如果一樣大,還是后面的覆蓋前面的。