内容简介：最近在做一个动画的时候，把动画元素的样式设置如下，但丝毫不起作用。这几天正好有时间，找了很多资料，来探究css如何控制html元素的堆叠秩序要弄清楚z-index不起作用的原因，需要回答以下三个问题：
最近在做一个动画的时候，把动画元素的样式设置如下，但丝毫不起作用。
.animate{
display:block;
z-index:9999;
position:absute;
}
复制代码
这几天正好有时间，找了很多资料，来探究css如何控制html元素的堆叠秩序
要弄清楚z-index不起作用的原因，需要回答以下三个问题：
1.什么是堆叠上下文（Stacking Contexts）？
2.如何形成堆叠上下文？
3.在同一个堆叠中元素如何堆叠（即在z轴方向上如何排序）？
二、什么是堆叠上下文
堆叠上下文和BFC有点类似，具有共同父元素的一组元素按堆叠顺序一起向前或向后移动，构成所谓的堆叠上下文。每个堆叠上下文中的元素相互不影响。
三、如何形成堆叠上下文？
要形成一个堆叠上下文只需满足以下条件中的一个：
- 文档根元素(html).
- 元素具有绝对或相对定位且z-index的值不为auto.
- position 为 fixed 或sticky.
- flex容器的子元素且z-index的值不为auto.
- grid容器的子元素且z-index的值不为auto.
- 元素样式的opacity属性小于1.
- 元素样式的 mix-blend-mode属性不为normal.
- 元素的样式包含transform、filter、perspective、clip-path等任何一个属性.
- 其他
四、在同一个堆叠中元素如何堆叠？
- 1.根元素的背景和边框
- 2.子代非定位块，按元素出现的顺序排序
- 3.浮动块
- 4.后代非定位内联元素
- 5.子代定位元素，按元素出现的顺序排序
- 6.堆叠上下文之间按元素出现的顺序及z-index排序
五、实例
1、文章开头概述中的问题
我需要把绿色的方块放到最上面
<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>Document</title>
<style>
div:nth-child(2) {
opacity: .99;
display: block;
z-index: 9999;
}
.red, .green, .blue {
position: absolute;
width: 100px;
color: white;
line-height: 100px;
text-align: center;
}
.red {
top: 20px;
left: 20px;
background: red;
}
.green {
top: 60px;
left: 60px;
background: green;
display: block;
z-index: 9999;
}
.blue {
top: 100px;
left: 100px;
background: blue;
}
</style>
</head>
<body>
<div>
<span class="red">Red</span>
</div>
<div>
<span class="green">Green</span>
</div>
<div>
<span class="blue">Blue</span>
</div>
</body>
</html>
复制代码
只需把 div:nth-child(2) { opacity: .99; }这个去掉绿色快就显示到最上面了
2、堆叠上下文之间的排序
<!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>CSS中的堆叠上下文</title>
<style>
div {
padding: 10px;
text-align: center;
}
#abs1 {
position: absolute;
width: 150px;
height: 200px;
top: 10px;
right: 140px;
border: 1px dashed #900;
background-color: #fdd;
}
#sta1 {
height: 100px;
border: 1px dashed #996;
background-color: #ffc;
margin: 0px 10px 0px 10px;
text-align: left;
}
#flo1 {
margin: 0px 10px 0px 20px;
float: left;
width: 150px;
height: 200px;
border: 1px dashed #090;
background-color: #cfc;
}
#flo2 {
margin: 0px 20px 0px 10px;
float: right;
width: 150px;
height: 200px;
border: 1px dashed #090;
background-color: #cfc;
}
#abs2 {
position: absolute;
width: 150px;
height: 100px;
top: 130px;
left: 100px;
border: 1px dashed #990;
background-color: #fdd;
}
#relat {
position: relative;
width: 150px;
height: 100px;
top: 30px;
left: 100px;
border: 1px dashed #990;
background-color: #fdd;
}
</style>
</head>
<body>
<div id="abs1">
<h2>DIV #1</h2>position: absolute;
</div>
<div id="flo1">
<h2>DIV #2</h2>float: left;
</div>
<div id="flo2">
<h2>DIV #3</h2>float: right;
</div>
<div id="sta1">
<h2>DIV #4</h2>no positioning
</div>
<div id="relat">
<h2>DIV #5</h2>
position: relative
</div>
</body>
</html>
复制代码
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
猜你喜欢:
- 图解词法作用域与作用域链
- javascript作用域之块级作用域
- javascript静态作用域和动态作用域
- JavaScript系列之作用域和作用域链
- 【7】JavaScript 函数高级——作用域与作用域链
- 深入学习js之——词法作用域和动态作用域
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
