标签：index 元素 100px 堆叠 HTML 上下文 css 200px
堆叠上下文
层/堆叠上下文（stack content） 他是一块区域，这块区域由某个元素创建 规定了该区域中内容在z轴上排列先后顺序
创建堆叠上下文的元素
- HTML元素（根元素）
- 设置z-index数值的定位元素（非auto值）
同一个堆叠上下文中元素在z轴上排列
从后到前的排列顺序：
-
创建堆叠上下文的元素的背景和边框
-
堆叠级别(z-index stack level)为负值的堆叠上下文
-
常规流非定位的块盒
-
非定位的浮动盒子
-
常规流非定位行盒
-
任何 z-index 是auto的 定位子元素，以及z-index是0的堆叠上下文
-
堆叠级别为正值的堆叠上下文
每个堆叠上下文，独立于其他堆叠上下文，他们之间不能相互穿插
<!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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。