css中position的使用

標籤：機制   無法   空間   相同   ott   strong   元素   改變   指定   

[相對定位 relative]
1、使用position: relative; 設定元素為相對定位的元素；

2、定位機制：
     ① 相對於自己原來文檔流中的位置定位，當不指定top等定位值時，不會改變元素位置；
     ② 相對定位元素，仍會佔據原有文檔流中的位置，而不會釋放。
 3、使用top、left、bottom、right調整位置。當left和right同時存在，left生效，當top和bottom同時存在，top生效。

[絕對位置 absolute]
1、使用position: absolute;設定元素為絕對位置元素。
 2、定位機制：
        ① 相對於第一個非static的祖先元素(即使用了relative/absolute/fixed定位的祖先元素)進行定位。
        ② 如果所有祖先元素均未定位，則相對於瀏覽器左上方定位；
        ③ 使用absolute的元素，會從文檔流中完全刪除，原有空間釋放不再佔有；

註：絕對位置absolute容易破壞父容器的位置，有時不經意就會帶著父容器移動，破壞網頁的布局，所以在用的時候，要小心一些使用，避免破壞網頁布局

[固定定位 fixed]

1、position: fixed; 是一種特殊的絕對位置，父容器無法使用relative

2、定位機制：永遠相對於瀏覽器進行定位。

註：固定定位在網頁布局中常用於連絡方式，客服等要一直出現的東西，無論頁面滾動到哪，都會一直出現

 [z-index 屬性]
1、作用：設定定位元素的Z軸層疊順序
 2、使用要求：① 必須是定位元素才能使用。relative/absolute/fixed
               ② 使用z-index需要考慮父容器的約束。
                如果父容器為z-index:auto，則子容器的z-index可以不受父容器的約束；
                如果父容器z-index進行了設定，則子容器的層疊將以父容器的z-index為準(在同一父容器的不同子項目，仍可以通過自己的z-index調整層疊關係)。

 3、z-index:auto & z-index:0 的異同：
      ① z-index:auto為預設值，與z-index:0處於同一平面。
     ② z-index:auto,不會約束子項目的z-index層次，而z-index:0，會約束子項目必須與父元素處於同一平面。
 
 4、z-index相同(處於同一平面的定位元素)的層疊關係：後來者居上

 

css中position的使用