堆叠上下文

最新推荐文章于 2023-01-31 12:54:27 发布
最新推荐文章于 2023-01-31 12:54:27 发布
阅读量221 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51398691/article/details/114294228
版权

堆叠上下文

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

创建堆叠上下文的标签

1.html标签（根标签）
2.设置了z-index数值的定位标签（非auto值）

同一个堆叠上下文中标签在z轴上的排列

从后（远离用户）到前(靠近用户）的排列顺序：

1.创建堆叠上下文的标签的背景和边框

<style>
        html{
            background: lightblue;
            /* 背景永远是最后的 */
        }
        .container{
            background: lightgreen;
            width: 200px;
            height: 200px;
            position: relative;
            z-index: 0;
            margin: 50px;
        }
        .item{
            width: 100px;
            height: 100px;
            background: red;
            z-index: -1;
            position: absolute;
            left: -30px;
            top: -30px;
        }
        /* Z-index 仅能在定位元素上奏效（例如 position:absolute;） */
    </style>
</head>
<body>
    <div class="container">
      <div class="item"></div>
    </div>
</body>
</html>

在这里插入图片描述

2.堆叠级别(z-index)为负值的堆叠上下文

    <style>
        html{
            background: lightblue;
            /* 背景永远是最后的 */
        }
        .container{
            background: lightgreen;
            width: 200px;
            height: 200px;
            position: relative;
            z-index: 0;
            margin: 50px;
        }
        .item{
            width: 100px;
            height: 100px;
            background: red;
            z-index: -1;
            position: absolute;
            left: -30px;
            top: -30px;
        }
        /* Z-index 仅能在定位元素上奏效（例如 position:absolute;） */
    </style>
</head>
<body>
    <div class="container">
      <div class="item"></div>
      <div class="item" style="background: magenta;z-index: -2;   left: -40px;top: -40px;"></div>
      <!-- 处于同一个堆叠上下文中，后面的覆盖前面的,同时负数的情况，值越大，越靠前 -->
    </div>
</body>
</html>

在这里插入图片描述

3.常规流非定位的块盒

<style>
        html{
            background: lightblue;
            /* 背景永远是最后的 */
        }
        .container{
            background: lightgreen;
            width: 200px;
            height: 200px;
            position: relative;
            z-index: 0;
            margin: 50px;
        }
        .item{
            width: 100px;
            height: 100px;
            background: red;
            z-index: -1;
            position: absolute;
            left: -30px;
            top: -30px;
        }
        /* Z-index 仅能在定位元素上奏效（例如 position:absolute;） */
        .normal{
            width: 200px;
            height: 200px;
            background: chocolate;
            margin-top: -75px;
        }
    </style>
</head>
<body>
    <div class="container">
      <div class="item"></div>
      <div class="item" style="background: magenta;z-index: -2;   left: -40px;top: -40px;"></div>
      <!-- 处于同一个堆叠上下文中，后面的覆盖前面的,同时负数的情况，值越大，越靠前 -->
    </div>
    <div class="normal"></div>常规流非定位盒子
</body>
</html>

在这里插入图片描述

4.非定位的浮动盒子

   <style>
        html{
            background: lightblue;
            /* 背景永远是最后的 */
        }
        .container{
            background: lightgreen;
            width: 200px;
            height: 200px;
            position: relative;
            z-index: 0;
            margin: 50px;
        }
        .item{
            width: 100px;
            height: 100px;
            background: red;
            z-index: -1;
            position: absolute;
            left: -30px;
            top: -30px;
        }
        /* Z-index 仅能在定位元素上奏效（例如 position:absolute;） */
        .normal{
            width: 200px;
            height: 200px;
            background: chocolate;
            margin-top: -75px;
        }
        .float{
            width: 200px;
            height: 200px;
            float: left;
            margin-left: 100px;
            margin-top: -250px;
            background: darkblue;
        }
    </style>
</head>
<body>
    <div class="container">
      <div class="item"></div>
      <div class="item" style="background: magenta;z-index: -2;   left: -40px;top: -40px;"></div>
      <!-- 处于同一个堆叠上下文中，后面的覆盖前面的,同时负数的情况，值越大，越靠前 -->
    </div>
    <div class="normal"></div>
    <div class="float"></div>
</body>
</html>

在这里插入图片描述

5.常规流非定位的行盒

覆盖不了span标签，如果p标签里面有文字，可以覆盖p标签，但覆盖不了文字，因为会形成匿名行盒。

6.任何z-index是auto的定位子标签，以及z-index是0的堆叠上下文

7.堆叠级别为正值的堆叠上下文

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

    <style>
        html{
            background: lightblue;
        }
        .c1{
            position: relative;
            z-index: 0;
            width: 200px;
            height: 200px;
            background: #008c8c;
        }
       .c2{
            position: absolute;
            z-index: -1;
            width: 200px;
            height: 200px;
            background: #d63f3f;
            left: 100px;
            top: 100PX;
        }
        .item1,.item2{
            position: absolute;
            width: 100px;
            height: 100px;
        }
        .item1{
            right: -50px;
            bottom: -50px;
           
        }
    </style>
</head>
<body>
    <div class="c1">
        <div class="item1" style="background: red;"></div>
        <div class="item2"></div>
    </div>
    <!-- 整体 -->
    <div class="c2">
        <div class="item1" style="background: magenta;"></div>
        <div class="item2"></div>
    </div>
    <!-- 整体，无论如何调两个item1的z-index都是红色覆盖粉色 -->
</body>
</html>

在这里插入图片描述

081&33
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
find-stacking-contexts:一种识别给定 DOM 节点元素的父 z-index 堆叠上下文的算法
05-30
然而，`z-index` 的行为并不总是直观，因为它的效果受到一个称为“堆叠上下文”的机制的影响。堆叠上下文是 CSS 中的一个抽象概念，定义了元素及其子元素的 `z-index` 相对排序。 标题中的 "find-stacking-contexts...
css堆叠上下文
wangfuw的博客
10-19 136
堆叠上下文(stack context) 是一块区域，这块区域由元素创建 它规定了该区域中的内容在z轴上排列的先后顺序 创建堆叠上下文的元素 html 设置了z-index数值的定位元素（非auto）数值的元素 同一个堆叠上下文在z轴上的排列 从后到前的排列 创建堆叠上下的元素背景和边框 堆叠上下文z-index为负数 常规流非定位的块盒 非定位的浮动盒子 常规流非定位的行盒 任何z-index为...
CSS中层叠上下文的具体使用
11-21
在CSS布局中，层叠上下文（Stacking Context）是一个非常关键的概念，它涉及到元素在Z轴方向上的堆叠顺序，决定了哪些元素会被其他元素覆盖。层叠上下文是HTML中的三维概念，与元素的z-index属性紧密相关，用于解决...
图形上下文栈Demo
03-19
图形上下文栈是Quartz 2D维护的一个内部结构，用于管理多个图形上下文的堆叠。当进行复杂的绘图操作时，开发者可以方便地在不同的上下文之间切换，以便进行层次化或局部的绘图。这个栈允许我们保存当前的绘图状态，...
js扑克堆叠式卡片轮播图插件
12-10
此外，可能还需要使用到CSS3的定位（positioning）和层叠上下文（z-index）来控制各个卡片的前后顺序。 总的来说，"js扑克堆叠式卡片轮播图插件"巧妙地融合了JavaScript的动态性、jQuery的便捷性和CSS3的视觉效果，...
关于堆叠上下文
qq_51660806的博客
01-31 142
什么是堆叠堆叠上下文？以及显示顺序
CSS样式里面的堆叠（层叠）上下文（层次顺序z-index）
李dayday
08-13 2564
看了网上很多的博客，将了关于这个层叠上下本的技术博客， 然后我也自己去整理了下，我这篇关css元素的堆叠顺序 写的很清楚，很有条理，很简单明了，层叠上下文的法则都总结好了，希望对大家有帮助 这个属于扩展，当然你想了解技术的话，可以看看我这个关于堆叠顺序的理解！ 不了解的话，当然有更加简单方法是完成堆叠上下本的方法！ 当然这是我自然的理解，有说的不对的地方，希望你们可以指出来！大家一起交流学习，...
CSS堆叠上下文
Shauna_Wu的博客
05-08 676
CSS堆叠上下文
堆叠上下文顺序
liujiujiang的博客
12-24 236
一：什么是“层叠上下文” 层叠上下文(stacking context)，是HTML中一个三维的概念。在CSS2.1规范中，每个盒模型的位置是三维的，分别是平面画布上的X轴，Y轴以及表示层叠的Z轴。一般情况下，元素在页面上沿X轴Y轴平铺，我们察觉不到它们在Z轴上的层叠关系。而一旦元素发生堆叠，这时就能发现某个元素可能覆盖了另一个元素或者被另一个元素覆盖。 如果一个元素含有层叠上下文，(也就是说...
[css] 剩余宽度自适应
qq_14993591的博客
08-09 606
calc(100% - 200px); 注意有空格才能生效 <!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-scal
前端面试复习篇前端面试复习篇
最新发布
06-06
层叠上下文涉及元素在三维空间中的堆叠顺序。触发层叠上下文的方式包括： - HTML根元素 - 使用`position`属性（如`absolute`或`fixed`) - CSS3属性（如`flex`, `transform`, `opacity`, `filter`, `will-change`...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值