CSS堆叠顺序

堆叠顺序

层叠上下文，英文称作”stacking context”. 是HTML中的一个三维的概念。如果一个元素含有层叠上下文，我们可以理解为这个元素在z轴上就“高人一等”。
z轴通常指用户眼睛到屏幕的一条直线。所有的元素都有层叠顺序。

<div class="parent"><div>
<style>
.parent{
    border: 30px solid rgba(255,0,0,0.4);
    background: white;
    width: 200px;
    height: 200px;
}
</style>

首先，我们创建一个div框。

image.png

当我们试着去改变background: black,我们会发现由于背景颜色盖在边框之上，边框的颜色会有所改变。

image.png

我们试着给这个div中加个内联元素，会发现，内联元素比那个没有因为背景是黑色，而隐藏掉。

image.png

内联元素是在background之上的，所以不会被背景色覆盖掉。
接着，我们在div中再创建一个内联元素

<style>
.parent{
  width: 200px;
  height: 200px;
  border: 30px solid red;
  background: green;
  font-size: 40px;
  color:black;
}

.child{
  height: 80px;
  background: blue;
  color: yellow;
} 
</style>
<div class="parent">
  hello
    <div class="child">
        hello
    </div>
</div>

image.png

我们会发现，子元素的背景色覆盖掉了父元素的背景色。然后，我们给子元素加个margin-top，子元素中的内联元素会将父元素中的文字覆盖掉。

image.png

我们继续添加一个浮动元素,同时稍微修改下子元素的样式，方便我们观察。

<style>
.child{
  height: 80px;
  background: black;
}
.float{
  width:100px;
  height: 80px;
  background: blue;
  float: left;
  margin-left:40px;
}
</style>
<div class="float"></div>

给float元素加一个margin，我们可以看到，蓝色的float元素，覆盖在div之上。

image.png

我们继续添加两个div元素

<style>
.relative1{
  width: 100px;
  height: 100px;
  background:brown;
  margin-top: -90px;
  
}
.relative2{
  width: 100px;
  height: 100px;
  background:orange;
  margin-top: -60px;
  margin-left:40px;
  
}
</style>
<div class="relative1"></div>
<div class="relative2"></div>

此时，我们可以看到，后出现的元素会覆盖在先出现的元素之上，但是，浮动元素仍然在顶端。

image.png

我们给两个元素都加上position。

image.png

这时，两个div都在float元素的上层。后出现的橙色元素暂时在最上面。

我们接着给.relative1加上一个z-index

.relative1{
  width: 100px;
  height: 100px;
  background:brown;
  margin-top: -90px;
  position:relative;
  z-index: 1;
}
.child{
  height: 80px;
  background: black;
  z-index: 3;
}

image.png

此时.relative1就在最上层。但是我们给.child加上z-index并没有效果，因为要给定位元素加上z-index（不为auto）才能触发堆叠上下文。

总结下来就是下图所示（原谅我盗图）：

image.png