1、position設定元素的定位方式
left right top bottom1、預設值為static 靜態
2、relative 相對定位 相對於自己的位置偏移
3、absolute 絕對定位 相對於非static最近的父級元素 一般來說是relative的
4、fixed 固定定位 一般相對於視窗
只要設定了position屬性 他的層級就高於沒有設定position的層級
層級順序
預設html結構順序
position（非static值） 元素高於其他元素
position（非static值） 元素之間先通過z-index值判斷
如果z-index相同按照html結構順序
auto（預設值）和整數
auto相當於0
3、層疊上下文的元素條件
（1）根元素html
（2）z-index值部位auto的絕對/相對定位
（3）乙個z-index值部位auto的flex專案（flex item） 即父元素 display：flex/inline-flex
（4）opacity屬性值小於1的元素
（5）transform屬性值不為 none 的元素
（6）mix-blend-mode的屬性值不為normal
（7）filter的值不為none
（8）perspective的值部位none
（9）isolation的屬性被設定為isolate的元素
（10）position：fixed
（11）在 will-change 中制定了任意的css屬性，即使你沒有直接指定這些屬性的值
（12）-webkit-overflow-scrolling屬性被設定touch的元素
關於position的層級
在層級比較多的頁面中，經常會出現被遮蓋的情況。下面用例項來講講這個問題的解決方法。其實宗旨就一條 第乙個父元素的層級一定要比第二個父元素的層級要高。先看一下不如意的 父級元素1 子級元素1 父級元素2 子級元素2 不如意的顯示效果 父級元素1 子級元素1 父級元素2 子級元素2 正確顯示結果 總結 ...
元素層級提高
定位元素中z index不等於auto，為大於0的值 元素設定opacity為不等於1的值 元素的transform屬性不為none will change指定的屬性值為上面任意乙個 了解 層級上下文 title style body box wrap wrap 1 wrap 2 wrap 3 wr...
頁面元素層級關係
具有定位的元素的層級,預設是後面的元素比前面的元素的層級高 這是對同級元素來說 標準流盒子低於浮動的盒子，浮動的盒子又低於定位的盒子。定位 relative,absolute,fixed 高於浮動，浮動高於標準流。給定z index的值為層級的值時。不給預設為0 層級為0的盒子，也比標準流和浮動高。...