前言:
我们有的时候,希望下方的内容能够显示到上方,达到类似于多个图层的效果,此时我们可以利用z-index这个属性。
介绍;
z-index属性值是用来设置元素的堆叠顺序(元素层级)。
覆盖原则:
<1>特殊情况
默认(或者position:static)情况下,z-index会失效,因此我们不会在此情况中使用z-index
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.a{z-index: 1;width: 200px;height: 200px;position: static;background-color: aqua;}.b{z-index: 100;background-color: rgb(222, 135, 135);}</style>
</head>
<body>
<div class="a"></div>
<div class="b"></div>
</body>
</html>
<2>同级元素之间
z-index级别大的在上,级别小的在下,z-index的默认值是0.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.a{z-index: 1;width: 300px;height: 300px; position:absolute;background-color:blue;}.b{width: 200px;height: 200px;z-index: 100;position:absolute;background-color: rgb(222, 135, 135);}</style>
</head>
<body><div class="a"></div><div class="b"></div>
</body>
</html>
<2>非同级元素
对于非同级的元素,元素根据其父级元素的z-index来判别,与自身的z-index无关
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.a {z-index: 12;width: 300px;height: 300px;position: absolute;background-color: rgb(96, 96, 140);}.b {width: 200px;height: 200px;z-index: 1;position: absolute;background-color: rgb(222, 135, 135);}.c {left: 100px;width: 200px;height: 200px;z-index: 100;position: absolute;background-color: aqua;}.d {width: 200px;height: 200px;z-index: 1;position: absolute;background-color: rgb(169, 36, 36);}</style>
</head><body><div class="a">box1<div class="b"></div></div><div class="c">box2<div class="d"></div></div>
</body></html>