前面花大力氣介紹了布局，現在講一講CSS的定位。

定位是什么？

定位跟布局有啥關系？答案是沒有關系，定位是指CSS在立體的角度的堆疊的情況，是垂直于屏幕的。

常常會有一個疑惑，CSS中，我給其中的一個div設置了它的background，給它的子元素設置了的background，請問這個時候兩個元素的顏色誰為主？

于是，讓我們來做實驗推理到底哪個在前哪個在后面。

首先我們分析出可能堆疊在一起的所有元素：

backgroud

border

block(塊級元素)

float

inlink

inline-block

position

實驗來證明

首先來看background，border這兩個的關系:

html:

css:

.father{

margin: 300px auto;

background-color: red;

height: 100px;

width: 100px;

border: 20px solid rgba(100%,100%,0%,1);

}

復制代碼

證明border是在background上方的，為了加深印象，將boder改成border:20px solid rgba(100%,100%,0%,0.5)

明顯的看到黃色被紅色渲染的有了顏色。于是得到結論border的層級高于background

接著加上子元素，給子元素的加上樣式如

.son{

background-color: blue;

height: 50px;

width: 50px;

}

復制代碼

看到子元素的背景色完全遮住了父元素的背景色，得到結論div的層級高于background

接著比較border和div的層級，給子元素加上如下css

.son{

background-color: blue;

height: 50px;

width: 50px;

margin-top: -10px;

}

復制代碼

得到結論，塊級的層級高于border

總結上述結論：background層級 < border層級 < 塊級層級

加入float

設計再加一個float，讓兩個子元素比較

html:

css:

.sonFloat{

background-color: rgba(250, 190, 88, 0.8);

height: 30px;

width: 30px;

float: left;

}

復制代碼

此時float的元素設置了透明度為0.8的背景色，結果顯示，float能蓋住原先div的背景色，證明了塊級的層級小于float

inline和inline-block

在

證明內聯的層級大于塊級

對代碼做如下改動

html:

+

css:

+ .sonInline{

background-color: green;

height: 40px;

width: 40px;

display: inline-block;

margin-bottom: -30px;

}

復制代碼

所以得出結論inline的層級大于inline-block的層級大于block的層級

position

代碼再次做改動

.sonInline{

background-color: orange;

width: 100px;

height: 100px;

position: relative;

top: 54px;

}

復制代碼

看到連文字都被覆蓋了，證明有position的元素的層級是最高的，無可爭議！對同一層級的，元素的表現如何呢？各自做相應的實驗，結果表明，遵循誰在下面誰就覆蓋上面的原則

最后得出結論：background < border < div < float < inline-block < line < position

但是，但是，但是！這是正常情況，如果我給position的元素加一個z-index,情況就都變化了！重新寫一個例子

html:

我是小毛我是大毛

css:

.test{

border: 1px solid red;

height: 200px;

width: 200px;

margin: 300px auto;

position: relative;

}

.demo01{

background-color: yellow;

height: 100px;

width: 100px;

position: absolute;

}

.demo02{

width: 50px;

height: 50px;

background-color: blue;

position: absolute;

}

復制代碼

這一切看起來很正常，因為demo01和demo02都加了absoulte，那么此時后出現的排在前面，于是demo02放前面，因為內聯僅僅小于position,于是html中內容我是大毛顯示了出來。此時給demo01和demo02加一個z-index

.demo01{

+ z-index=1;

}

.demo01{

+ z-index=0;

}

復制代碼

此時，demo01的我是小毛出來了，而我是大毛卻消失了，給一個透明度，發現就在demo01的下面，但是此時，css的排序方式并不符定位的規則！

所以這邊還要加一個特殊的規則：層疊上下文

文檔中的層疊上下文由滿足以下任意一個條件的元素形成：

文檔根元素()

position的值為absolute(絕對定位)或relative(相對定位)且z-index的值不為auto(即z-index不為默認值)

position的值為fixed或sticky的元素

flex的子元素，且z-index不為auto

gird的子元素，且z-index不為auto

opacity的值不為1

以下任意值不為none的元素：

transform

filter

perspective

clip-path

如果形成了層疊上下文，那么久去比較雙方的z-index或者其他屬性誰高，但是它的內部還是按照定位的規則排列。

總結

以上是生活随笔為你收集整理的css层叠上下文详解,CSS定位（层叠上下文）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。