关于堆叠上下文

最新推荐文章于 2023-05-23 21:22:56 发布

sunyi@손의

最新推荐文章于 2023-05-23 21:22:56 发布

阅读量160

点赞数

文章标签： css 前端 html

本文链接：https://blog.csdn.net/qq_51660806/article/details/128810403

版权

堆叠上下文

什么是堆叠堆叠上下文？以及显示顺序

堆叠上下文（stack context)是一块区域，该区域由某个元素创建，它规定了该区域中的内容在z轴上的排列顺序。
（关于z轴：随便打开一个浏览器显示一个页面，电脑桌面做左上角设为坐标轴的原点，向右为x轴，向下为y轴，z轴则是箭头朝向自己的从后往前的坐标轴）

在同一堆叠上下文的区域中z轴上的显示顺序：

    顺序：Z轴**从后到前**的展示顺序
    1.创建堆叠上下文（元素）的背景与边框
    2.堆叠级别为负值（z-index:-1）的堆叠上下文
    3.常规流非定位的块盒
    4.非定位元素的浮动元素
    5.常规流非定位行盒
    6.任何z-index:auto 的定位子元素，以及z-index：0的堆叠上下文
    7.堆叠级别为正值的堆叠上下文

怎么创建堆叠上下文

堆叠元素由某以下元素创建：
1.根元素（HTML元素）
2.设置了 z-index属性值非auto值得定位元素

堆叠上下文与BFC（块级格式化上下文）

堆叠上下文和BFC（块级格式化上下文）有一个很重要的相同点就是都创建了一个区域，只是堆叠上下文创建的区域规定了该区域的内容在z轴上的显示顺序，而BFC创建出来的区域是规定了该区域内常规流盒子的布局。两者创建出来的区域都是独立的区域，相互之间不影响。在进行网页布局时应该拥有整体的思想帮助理解。如图：

在这里插入图片描述

堆叠上下文演示

这里直接按照顺序演示：
1.创建堆叠上下文（元素）的背景与边框
2.堆叠级别为负值（z-index:-1）的堆叠上下文

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>堆叠上下文</title>
    <style>
        html {
            background-color: lightblue;
            text-align: center;
        }
        
        .two {
            width: 250px;
            height: 250px;
            position: absolute;
            background-color: blueviolet;
            z-index: -1;
        }
        
        .three {
            width: 350px;
            height: 80px;
            background-color: chocolate;
            overflow: hidden;
        }
        
        .four {
            width: 300px;
            height: 200px;
            background-color: crimson;
            float: left;
            margin-top: -50px;
            margin-left: 30px;
        }
        
        .five {
            background-color: bisque;
            margin: 20px;
        }
        
        .six {
            position: absolute;
            background-color: beige;
            width: 150px;
            height: 150px;
            top: 30px;
            left: 50px;
            /* z-index: 0; */
            /* z-index: auto; */
        }
        
        .seven {
            width: 100px;
            height: 100px;
            background-color: #008c8c;
            position: absolute;
            z-index: 2;
            top: 35px;
            left: 25px;
        }
    </style>
    <!-- 
        顺序：Z轴从后到前的展示顺序
        1.创建堆叠上下文（元素）的背景与边框
        2.堆叠级别为负值（z-index:-1）的堆叠上下文
        3.常规流非定位的块盒
        4.非定位元素的浮动元素
        5.常规流非定位行盒
        6.任何z-index:auto 的定位子元素，以及z-index：0的堆叠上下文
        7.堆叠级别为正值的堆叠上下文

        注：堆叠上下文创建之后，需要有整体的思想，（每个堆叠上下文独立于其他堆叠上下文，他们之间不能相互穿插影响类似于BFC）



        
     -->
</head>

<body>
    <!-- 以下将根据按照顺序演示 为了帮助理解，我们直接将“7”直接参加进来做对比-->
    <!-- <div class="seven">

    </div> -->

    <div class="two"></div>
    <div class="three">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Corporis similique placeat aspernatur aliquid illo laudantium, animi illum, eveniet molestiae dolorum dolorem, sunt accusamus! Explicabo excepturi voluptatem blanditiis similique inventore?</div>
    <div class="four">
    </div>
    <p class="five">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Itaque, eius voluptatem aliquid ullam vel repudiandae provident consectetur minima dolorum quibusdam officiis repellendus nihil ipsa rerum ratione praesentium beatae odit delectus labore voluptas

    </p>
    <div class="six"></div>
    <div class="seven"></div>



</body>

</html>

    1.创建堆叠上下文（元素）的背景与边框
    2.堆叠级别为负值（z-index:-1）的堆叠上下文

显示结果：

在这里插入图片描述

   1.创建堆叠上下文（元素）的背景与边框
    2.堆叠级别为负值（z-index:-1）的堆叠上下文
    3.常规流非定位的块盒

在这里插入图片描述

    1.创建堆叠上下文（元素）的背景与边框
    2.堆叠级别为负值（z-index:-1）的堆叠上下文
    3.常规流非定位的块盒
    4.非定位元素的浮动元素

在这里插入图片描述

    1.创建堆叠上下文（元素）的背景与边框
    2.堆叠级别为负值（z-index:-1）的堆叠上下文
    3.常规流非定位的块盒
    4.非定位元素的浮动元素
    5.常规流非定位行盒

在这里插入图片描述
1.创建堆叠上下文（元素）的背景与边框
2.堆叠级别为负值（z-index:-1）的堆叠上下文
3.常规流非定位的块盒
4.非定位元素的浮动元素
5.常规流非定位行盒
6.任何z-index:auto 的定位子元素，以及z-index：0的堆叠上下文

在这里插入图片描述
1.创建堆叠上下文（元素）的背景与边框
2.堆叠级别为负值（z-index:-1）的堆叠上下文
3.常规流非定位的块盒
4.非定位元素的浮动元素
5.常规流非定位行盒
6.任何z-index:auto 的定位子元素，以及z-index：0的堆叠上下文
7.堆叠级别为正值的堆叠上下文
在这里插入图片描述
文章分享到这里啦，文章原创制作不易轻点喷。有任何问题，欢迎交流~