z-index

Sat, 09 Nov 2024 00:00:00 +0800

大家可能觉得，z-index 是一个很简单的属性，你给它设置哪个值，元素就会位于 y 轴的哪个位置。但它实际上并没有我们想象的这么简单，这个属性背后是一系列决定元素所在层级的规则。

在进行今天的介绍前，我们先列出三个问题，如果你能一眼看出它们的解决方案，那么恭喜你掌握了z-index，也就不需要阅读本文了；如果不行，那么耐心看完本文，相信能找到答案。

三个自测问题

问题一：为什么z-index 数值更大，但 Content 没有在 Box 2 之上？

<div id="box1">
 Box 1
</div>

<div id="content">
 Content <br/>
 z-index: 2;
</div>

<div id="box2">
 Box 2 <br/>
 z-index: 1;
</div>

div {
 padding: 25px;
 font-size: larger;
}

#box1 {
 background-color: chocolate;
 width: 200px;
 height: 100px;
 margin-bottom: -50px;
}

#content {
 background-color: gold;
 width: 300px;
 height: 200px;
 z-index: 2;
}

#box2 {
 background-color: cyan;
 width: 200px;
 height: 100px;
 margin-top: -50px;
 z-index: 1;
}

问题二：明明 z-index 数值更小，为什么 Content 这次反而在Box 2 之上了？

<div id="box1">
 Box 1
</div>

<div id="content">
 Content <br/>
 transform: rotate(90deg); <br/>
 z-index: 1;
</div>

<div id="box2">
 <br/>
 Box 2 <br/>
 z-index: 2;
</div>

div {
 padding: 25px;
 font-size: larger;
}

#box1 {
 background-color: chocolate;
 width: 200px;
 height: 100px;
 margin-bottom: -10px;
}

#content {
 background-color: gold;
 width: 250px;
 height: 200px;
 z-index: 1;
 transform: rotate(90deg);
}

#box2 {
 background-color: cyan;
 width: 200px;
 height: 100px;
 margin-top: -10px;
 z-index: 2;
}

Z-Index on Last Stand

z-index

三个自测问题