CSS基礎：層疊順序和層疊上下文

時間 2019-12-01

標籤 css 基礎層疊順序上下文欄目 CSS 简体版

原文原文鏈接

簡介css

　　在考慮到兩個元素可能重疊的狀況下，層疊順序決定了那個元素在前面，那個元素在後面，這是針對普通元素而言。而層疊上下文和塊級格式化上下文 (BFC) 同樣，基本上也是由一些 CSS 屬性建立的，它單獨做爲一個體系，也就是說內容的層疊順序是以容器的層疊順序爲基準的，而與容器外部元素的層疊順序無關，層疊上下文的建立能夠分爲如下三類：html

(1) 頁面根元素天生具備層疊上下文，稱爲根層疊上下文佈局

(2) "z-index" 爲數值的定位元素擁有本身的層疊上下文，數值越大，層疊順序越高flex

(3) 某些 CSS3 屬性也擁有本身的層疊上下文spa

元素的層疊順序3d

　　如圖所示：code

(1) 層疊順序大的元素會覆蓋較小的元素orm

(2) 層疊順序相同時，處於 DOM 流中後面的元素會覆蓋前面的元素htm

(3) "background/border" 特指層疊上下文元素的背景和邊框，若是一個元素是普通元素，沒有建立單獨的層疊上下文，而且它的子代有負的 "z-index"，那這個子代就會隱藏在背景後面，由於它的子代是相對於根層疊上下文決定的。blog

示例1：

<!-- html -->
<div class="box">
  <div class="order1"></div>
</div>

//css
.box {
  width: 200px;height: 200px;
  background: lightblue;
}
.order1 {
  width: 150px;height: 150px;
  background: red;
  position: relative;
  z-index: -1;
}

運行結果：

示例2：

//css
.box {
  width: 200px;height: 200px;
  background: lightblue;
  position: relative;
  z-index: 1;
}
.order1 {
  width: 150px;height: 150px;
  background: red;
  position: relative;
  z-index: -1;
}

運行結果：

(4) "z-index:auto" 和 "z-index:0" 雖然層疊順序同樣，也就是遵循規則 (2) 中 "後來者居上" 的原則，可是它們的區別在於後者會建立單獨的層疊上下文。

示例1：

<!-- html -->
<div class="box">
  <div class="order1"><div class="child1"></div></div>
  <div class="order2"><div class="child2"></div></div>
</div>

//css
.box {
  height: 300px;
  position: relative;
  z-index: 1;
}
.order1 {
  width: 250px;height: 250px;
  background: red;
  position: absolute;
  z-index: auto;
}
.order1 .child1 {
  width: 50px;height: 50px;
  background: yellow;
  position: relative;
  z-index: 2;
}
.order2 {
  width: 200px;height: 200px;
  background: green;
  position: absolute;
  z-index: auto;
}
.order2 .child2 {
  width: 100px;height: 100px;
  background: blue;
  position: relative;
  z-index: 1;
}