css中position的使用
[相對定位 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的使用