[前端][CSS]用ps的方式理解层叠上下文

Tuzei

修改于 2023-09-21 14:47:50

4090

修改于 2023-09-21 14:47:50

文章被收录于专栏：Tuzei的笔记

之前看了大佬的对层叠上下文的解释 https://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/ 然后感觉对各种设置了z-index的情况可以用Photoshop里图层的方式来进行一个理解会直观很多。

我们可以把创建层叠上下文，看成就像是在ps里面创建了一个组，把子元素放到组里。而父没有达成创建上下文条件的，子会被类似当成根下的一个单独的图层。我们这里的创建层叠上下文的方式，主要是用这一条来进行（其他创建方式下的表现，比如设置了transform等，这些还没仔细研究）

定位元素与传统层叠上下文对于包含有position:relative/position:absolute的定位元素，以及FireFox/IE浏览器（不包括Chrome等webkit内核浏览器）（目前，也就是2016年初是这样）下含有position:fixed声明的定位元素，当其z-index值不是auto的时候，会创建层叠上下文。

举个栗子：

    <div id="1" style="position:relative; z-index:auto;">
        <span id="1-1" style="position:absolute;background-color:red;">
            ？？？？
        </span>
    </div>
    <div id="2" style="position:relative; z-index:auto;">
        <span id="2-1" style="position:absolute; background-color:antiquewhite;"> 666</span>
    </div>

这里父的z-index都是auto，都没有达成创建层叠上下文的条件。不过注意和ps相反的是，自然情况下，html里是后面的元素会在前面元素的上面。像这样。

Photoshop示意图

运行结果

如果在2-1，1-1里设置z-index，就等于按z-index来调整他们的顺序，越大放在越上面。

    <div id="1" style="position:relative; z-index:auto;">
        <span id="1-1" style="position:absolute;z-index:2;background-color:red;">
            ？？？？
        </span>
    </div>
    <div id="2" style="position:relative; z-index:auto;">
        <span id="2-1" style="position:absolute;z-index:1;background-color:antiquewhite;"> 666</span>
    </div>

Photoshop示意图

这里1-1的z-index大于2-1的z-index，所以就放在了上面

显示结果

而当父达成了创建层叠上下文条件：比如当id=1的div设置了z-index为具体值，就达成了创建层叠上下文条件。就等于放进了一个组里。

而id=2不改变，所以依然没有满足层叠上下文的条件。2-1是和group 1同层做比较的。当1的z-index设置小于2-1，则2-1在上，group 1在下，group1的内容都在下。

    <div id="1" style="position:relative; z-index:1;">
        <span id="1-1" style="position:absolute;z-index:3;background-color:red;">
            ？？？？
        </span>
    </div>
    <div id="2" style="position:relative; z-index:auto;">
        <span id="2-1" style="position:absolute;z-index:2;background-color:antiquewhite;"> 666</span>
    </div>

运行结果

在group 1内部的元素的z-index，只是在改变它在group1里的排序。类似这样。

所以即使group1里的元素z-index设置大于2-1的z-index，但是也没办法跳出它的父，覆盖到2-1上。

而同理，当group1的z-index比2-1大的时候，它就被放到上面去了。

就算它的子的z-index再小，也不会跑出这组，跑到2-1下面去

    <div id="1" style="position:relative; z-index:4;">
        <span id="1-1" style="position:absolute;z-index:1;background-color:red;">
            ？？？？
        </span>
    </div>
    <div id="2" style="position:relative; z-index:auto;">
        <span id="2-1" style="position:absolute;z-index:3;background-color:antiquewhite;"> 666</span>
    </div>

显示

注意如果是这样：

    <div id="1" style="position:relative; z-index:4;">
        <span id="1-1" style="position:absolute;z-index:1;background-color:red;">
            ？？？？
        </span>
    </div>
    <div id="2" style="position:relative; z-index:auto;">
        <span id="2-1" style="position:absolute;z-index:3;background-color:antiquewhite;"> 666<span id="2-1-1" style="position:absolute;z-index:10;background-color:green;"> 2-1-1</span></span>
    </div>

其实是等于2-1创建了层叠上下文，创建了个group