其他分享
首页 > 其他分享> > HTML css——堆叠上下文

HTML css——堆叠上下文

作者：互联网

堆叠上下文

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

创建堆叠上下文的元素

  1. HTML元素（根元素）
  2. 设置z-index数值的定位元素（非auto值）

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

从后到前的排列顺序：

  1. 创建堆叠上下文的元素的背景和边框

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

  3. 常规流非定位的块盒

  4. 非定位的浮动盒子

  5. 常规流非定位行盒

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

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

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

<!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>Document</title>
    <style>
        html{
            background-color: lightblue;
        }

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

        .c2{
            position: absolute;
            z-index: -1;
            height: 200px;
            width: 200px;
            background-color: chocolate;
            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-color: red;"></div>
        <div class="item2"></div>
    </div>
    <div class="c2">
        <div class="item1" style="background-color: rgb(122, 8, 8);"></div>
        <div class="item2"></div>
    </div>
</body>
</html>

对item1设置z-index不管用，因为视为整体，整体排列，统一设置外层

标签：index,元素,100px,堆叠,HTML,上下文,css,200px
来源： https://blog.csdn.net/coising/article/details/122699360