CSS样式里面的堆叠（层叠）上下文（层次顺序z-index）

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

DayDay_Lee

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

阅读量2.6k

点赞数 1

分类专栏：前端CSS学习笔记文章标签： CSS层叠上下文（z-index）两张图片叠加

本文链接：https://blog.csdn.net/qq_43127921/article/details/99418527

版权

前端CSS学习笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

看了网上很多的博客，将了关于这个层叠上下本的技术博客，
然后我也自己去整理了下，我这篇关css元素的堆叠顺序
写的很清楚，很有条理，很简单明了，层叠上下文的法则都总结好了，希望对大家有帮助

这个属于扩展，当然你想了解技术的话，可以看看我这个关于堆叠顺序的理解！
不了解的话，当然有更加简单方法是完成堆叠上下本的方法！

~~当然这是我自然的理解，有说的不对的地方，希望你们可以指出来！大家一起交流学习，一起进步~~

堆叠上下文

堆叠(层叠)(栈)上下文(stack context)
它是一个区域,这个区域由某个元素去创建,它规定了这个区域中的内容
在Z轴上排列的先后顺序。

创建堆叠上下文的元素

1. html元素(根元素)
2. 设置了z-index数值的定位元素(非auto)
3. 一定是定位元素，也就是需要你去设置这个position属性
4. 当然你也可以去mdn官方文档查看 层叠上下本 哪些元素可以去创建上下本

单个层叠上下本规则

## 同一个堆叠上下文中元素在Z轴上的排
从后到前的排列顺序,也就是出现靠底层
显示层次顺序
1. 创建堆叠上下文的元素的背景跟边框
2. 堆叠级别(z-index)为负值的堆叠上下文
3. 常规流非定位的块盒
4. 非定位的浮动盒子
5. 常规流非定位行盒
6. 任何 z-index 是 auto 的定位子元素
7. 堆叠级别为正值的堆叠上下文

---->>>每个堆叠上下文,独立于其他的堆叠上下文,它们之间不能相互穿插。
你可以理解就是 把每个元素创建的堆叠上下文 看成一个整体。

接下来看下单个层叠上下文的例子

在这里插入图片描述
你可以通过调整每个盒子的margin-top属性的值,依次完成或者去理清楚这个覆盖的情况

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>单个堆叠上下本</title>
    <style>

        /* 第1个级别   背景跟边框 */
        html{
            /* 本身html也会创建堆叠上下文 */
            background: lightblue;
        }

        /* 第6个级别  就是z-index 为默认值 auto 或者为0  
            很显然 这个效果是在最前面的 
        */
        .container{
            background: #008c8c;
            width: 200px;
            height: 200px;
            position: relative;
            /* 创建堆叠上下文 */
            /* z-index: -1; */
            /* 要是这个z-index是auto的话,这个div就不会创建堆叠上下文 */
            margin: 50px;
        }

        /* 第2个级别  就是z-index为负数 */
        .item{
            width: 100px;
            height: 100px;
            background: red;
            position: relative;
            z-index: -1;
            /* z-index: 设置的值为多少,都是无法在父元素的下面 */
            float: left;
            left: -30px;
            top: -30px;
        }
        /* 第3个级别   常规流非定位块盒 */
        .nomal{
            /* 通过浏览器F12去修改margin-top值 动态修改,可以看到效果*/
            width: 200px;
            height: 200px;
            background: chocolate;
            margin-top: -200px;
        }

        /* 第4个级别   非定位浮动盒子 */
        .float{
            width: 200px;
            height: 300px;
            background: brown;
            margin-top: -390px;
            /* 这个效果最佳 */
            float: left;
            margin-left: 40px;
        }
        /* 第5个级别   常规流非定位行盒 */
        /* 需要注意的就是我们可以看到这个 级别四已经 */
        span{
            background: lightyellow;
            
        }

        /* 第7个级别   很显然  把堆叠级别z-index设置为正值的堆叠上下文, 显然出现在最上面
        
            前提条件就是这个  这个元素会形成堆叠上下文, 不然你去设置堆叠上下文是没有效果的
        */

    </style>
</head>
<body>

    <!-- 第三个 + 第五个级别-->
    <!--因为p元素是常规流非定位块盒 第三个级别  然后 
    这些文字其实是写在span里面的  也是就 常规流非定位行盒
    最后效果也就是很明显,为什么 级别四的背景覆盖了级别三<p>元素的背景
    但是没有覆盖这个 文字的颜色 就是因为文字隐式默认装在<span>里面  (匿名行盒)
    
    以上的解释也就是很清楚解释网页呈现的效果了
    -->
    <p style="background: lightyellow;">
        Lorem ipsum dolor sit amet consectetur, adipisic
    </p>
    <!-- 第五个级别 -->
    <span style="background: lightyellow;">
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Delectus, illo?
    </span>
    <div class="container">
        <div class="item">

        </div>
    </div>

    <div class="nomal">
        <!-- 常规流盒子非定位 -->
    </div>

    <div class="float">
        <!-- 非定位浮动盒 -->
    </div>
</body>
</html>

多个层叠上下文

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        html{
            background: lightblue;

        }
        .c1{
            position: relative;
            z-index: 0;
            background: #008c8c;
            width: 200px;
            height: 200px;

        }
        .c2{
            position: absolute;
            width: 200px;
            height: 200px;
            z-index: -1;
            background:chocolate;
            left: 100px;
            top: 100px;
        }
        .item1,.item2{
            position: absolute;
            height: 100px;
            width: 100px;
        }
        .item1{
            right: -50px;
            bottom: -50px;
        }
    </style>
</head>
<body>
    
        <!-- c1 c2 盒子都会形成堆叠上下本  它们都是在html根元素里面进行层叠 
        所以先把它们两看成两个整体,它们内部的子元素所形成的上下文 暂时不看
        c2的盒子z-index为负,比c1更靠前！根据
        -->

        <!-- 第二个问题
        
        凭什么c1的item1中的红色可以去覆盖这个c2的红色
        规则就是要看整体,你看第一个红色是在c1上下文里面
        第二个红色在c2形成的层叠上下文里面
        所以他们子元素都是以整体来说的,你可以认为他们不可分割
        这样子就能去解释为什么c1红色去覆盖c2红色了！
        -->

        <!-- 第三个问题
            假设我设置item2,让它也形成一个上下文,
            那么item1与item2它们之间的顺序如何
            其实它们两都在c1形成的层叠上下文里面,
            所以它们两根据单独的堆叠上下本就可以分辨
         -->
        <div class="c1">
            <div class="item1 " style="background: red;">红色</div>
            <div class="item2"></div>
        </div>
        
        <div class="c2">
            <div class="item1" style="background: rgb(204, 11, 11); ">红色</div>
            <div class="item2"></div>
        </div>
    
</body>
</html>

结语

以上的例子，希望大家对z-index属性有更加深入的理解，这个原理明白了，以后完成两张图片叠加
或者说是这样子叠加，层叠的效果，就信手捏来！
~~有问题的，或者哪里说得不对了，希望大家指出来~~

DayDay_Lee

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录