堆疊順序

層疊上下文，英文稱作”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>

首先，我們創(chuàng)建一個div框。

image.png

當(dāng)我們試著去改變background: black,我們會發(fā)現(xiàn)由于背景顏色蓋在邊框之上，邊框的顏色會有所改變。

image.png

我們試著給這個div中加個內(nèi)聯(lián)元素，會發(fā)現(xiàn)，內(nèi)聯(lián)元素比那個沒有因為背景是黑色，而隱藏掉。

image.png

內(nèi)聯(lián)元素是在background之上的，所以不會被背景色覆蓋掉。
接著，我們在div中再創(chuàng)建一個內(nèi)聯(lián)元素

<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

我們會發(fā)現(xiàn)，子元素的背景色覆蓋掉了父元素的背景色。然后，我們給子元素加個margin-top，子元素中的內(nèi)聯(lián)元素會將父元素中的文字覆蓋掉。

image.png

我們繼續(xù)添加一個浮動元素,同時稍微修改下子元素的樣式，方便我們觀察。

<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，我們可以看到，藍(lán)色的float元素，覆蓋在div之上。

image.png

我們繼續(xù)添加兩個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>

此時，我們可以看到，后出現(xiàn)的元素會覆蓋在先出現(xiàn)的元素之上，但是，浮動元素仍然在頂端。

image.png

我們給兩個元素都加上position。

image.png

這時，兩個div都在float元素的上層。后出現(xiàn)的橙色元素暫時在最上面。

我們接著給.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）才能觸發(fā)堆疊上下文。

總結(jié)下來就是下圖所示（原諒我盜圖）：

image.png