【堆叠上下文】

非鱼ovo

已于 2023-06-18 13:40:15 修改

阅读量129

点赞数 1

文章标签： css html css3

于 2023-05-23 21:22:56 首次发布

本文链接：https://blog.csdn.net/qq_58071329/article/details/130835575

版权

堆叠上下文

mdn文档 - 堆叠上下文

浏览器坐标轴

浏览器中: 水平为 X 轴 , 垂直向下为为 Y 轴 , 而 Z 轴则是垂直于屏幕 .

什么是堆叠上下文?

堆叠上下文（stack context），它是一块区域，这块区域由某个元素创建，它规定了该区域中的内容在 z 轴上的排列的先后顺序 .

通常可以通过设置 z-index 来控制元素在z轴的排列顺序 .

z-index 排列规则

mdn文档 - z-index

设置 z-index 通常情况下，该值越大，越靠近用户 .

z-index 可以是负数，如果是负数，则遇到常规流，浮动元素，则会被其覆盖 .

一. 创建堆叠上下文的元素

html元素（根元素）
absolute 绝对定位和 relative 相对定位，且设置了 z-index 且值非 auto 数值的定位元素
fixed 固定定位和 sticky 粘性定位
flex 容器的子元素，且设置了 z-index 且值不为 auto
grid 容器的子元素，且设置了 z-index 且值不为 auto
transform filter background-filter perspective clip-path 等

二. 同一个堆叠上下文中元素在 z 轴上的排列

从后到前依次排列顺序：

创建堆叠上下文的元素的背景和边框
堆叠级别为负数的堆叠上下文
常规流非定位的块盒
非定位的浮动盒子
常规流非定位盒子
任何 z-index 是 auto 的定位子元素，以及 z-index 是 0 的堆叠上下文
堆叠级别为正值的堆叠上下文

每个堆叠上下文，独立于其他堆叠上下文，它们不能相互穿插

示例

普通元素设置 z-index 不会生效

<head> 
	<style>
        .container {
            width: 300px;
            height: 300px;
            background-color: violet;
            z-index: 10;
        }
    </style>
</head>

<body>
    <div class="container"></div>
</body>

结果

z-index 不生效

产生堆叠上下文的元素生效

这里使用 flex 产生堆叠上下文 , 不过你需要注意 , 文档规定是 flex 的子元素才可以使用 z-index .

flex 创建堆叠上下文, 它的子元素通过设置 z-index 来决定在这个堆叠上下文中z轴的排列顺序 .

<head>
    <style>
        .container {
            display: flex;
            width: 300px;
            height: 300px;
            background-color: violet;
        }

        .child {
            z-index: 10;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="child"></div>
    </div>
</body>

结果

z-index 生效

总结

一般我们设置 z-index 都是在定位元素上设置的 , 通常的做法是给元素加上 position: reactive; 然后设置 z-index .

注意点: z-index 规定的是元素在当前这个堆叠上下文中的z轴排列顺序 . 而不是整个文档中z轴的顺序 .

示例

<head>
    <style>
        .container1 {
            position: relative;
            z-index: 10; /* 设置层级 */
        }

        .container1 .a {
            position: absolute;
            z-index: 1; /* 设置层级 */
            width: 300px;
            height: 300px;
            background-color: violet;
        }

        /* container2 */
        .container2 {
            position: relative;
            z-index: 9; /* 设置层级 */
        }

        .container2 .b {
            position: absolute;
            left: 150px;
            z-index: 1000; /* 设置层级 */
            width: 300px;
            height: 300px;
            background-color: lightblue;
        }
    </style>
</head>

<body>
	<div class="container1">
        <div class="a">container1</div>
    </div>
    <div class="container2">
        <div class="b">container2</div>
    </div>
</body>