-
7階層疊水平
查看全部 -
內容是頁面最重要的實體，因此，層疊水平要搞
查看全部 -
z-index與其他Css屬性層疊上下文
查看全部 -
其他CSS屬性與層疊上下文
1、z-index不為auto且父元素display：flex|inline-flex
2、元素的opacity值不為1
3、元素的transform不為none
4、position：fixed聲明
5、元素的filter值不為none
……
查看全部 -
z-index與層疊上下文
1、定位元素默認z-index：auto；可以看成是z-index：0；
2、z-index不為auto的定位元素會創(chuàng)建層疊上下文
3、z-index層疊順序的比較止步于父級層疊上下文
4、一旦容器z-index值為數(shù)值，圖片的層疊上下文元素變?yōu)槿萜?/p>
5、從層疊順序上講，z-index:auto可以看成z-index:0，但是從層疊上下文來講，兩者存在本質差異
6、z-index受限于層疊上下文
查看全部 -
元素的層疊順序：
層疊順序表示元素發(fā)生層疊時的特定的垂直顯示順序
查看全部 -
CSS3中的層疊上下文和層疊水平：
1、層疊上下文：表示元素在z軸上有“可以高人一等”
（可以理解為普通老百姓HTML元素，當官了，離皇帝越近了）
具有層疊上下文的元素：
1）根元素，成為“跟層疊上下文（皇親國戚）
2）z-index值為數(shù)值的定位元素（科考入選）
3）其他屬性（其他途徑）
2、層疊水平：層疊上下文的每個元素都有一個層疊水平，決定了同一個層疊上下文中元素在z軸上的顯示順序，遵循“后來居上”和“誰大誰上”的層疊準則
層疊水平不是z-index，普通元素也有層疊水平（官員家里的仆人也有一個排列順序，表示誰離官員更近）
查看全部 -
z-index與CSS定位屬性：
1、定位元素只有設置為relative、absolute、fixed、sticky才有用
2、若定位元素z-index沒有嵌套
? ?1）后來居上：不設置其它屬性時，通常后面的元素覆蓋前面的
? ?2）哪個大，哪個上，z-index大的覆蓋小的
3、若定位元素發(fā)生嵌套
? ? 祖先優(yōu)先原則：前提是z-index設置為確定的數(shù)值，此時需要比較祖先元素z-index的大小來確定哪個元素在上面
查看全部 -
z-index：
1、屬性值
z-index：auto（默認，相當于為0）/? 整數(shù)值? /inherit（繼承）;
2、z-index基本特性
1）支持負值
2）支持css3的animation動畫
3）在css2.1時代，要與定位元素配合使用
查看全部 -
如果都是數(shù)字，發(fā)生嵌套，祖先優(yōu)先，但祖先是auto就沒用了。
查看全部 -
z-index只對定位元素起作用
查看全部 -
更完整的7階層疊上下文
查看全部 -
其他參與層疊上下文的屬性們
查看全部 -
7階層疊水平
查看全部 -
z-index
查看全部
舉報