css层叠上下文详解,CSS定位（层叠上下文）
前面花大力氣介紹了布局，現(xiàn)在講一講CSS的定位。
定位是什么？
定位跟布局有啥關(guān)系？答案是沒有關(guān)系，定位是指CSS在立體的角度的堆疊的情況，是垂直于屏幕的。
常常會有一個疑惑，CSS中，我給其中的一個div設(shè)置了它的background，給它的子元素設(shè)置了的background，請問這個時候兩個元素的顏色誰為主？
于是，讓我們來做實驗推理到底哪個在前哪個在后面。
首先我們分析出可能堆疊在一起的所有元素：
backgroud
border
block(塊級元素)
float
inlink
inline-block
position
實驗來證明
首先來看background，border這兩個的關(guān)系:
html:
css:
.father{
margin: 300px auto;
background-color: red;
height: 100px;
width: 100px;
border: 20px solid rgba(100%,100%,0%,1);
}
復(fù)制代碼
證明border是在background上方的，為了加深印象，將boder改成border:20px solid rgba(100%,100%,0%,0.5)
明顯的看到黃色被紅色渲染的有了顏色。于是得到結(jié)論border的層級高于background
接著加上子元素，給子元素的加上樣式如
.son{
background-color: blue;
height: 50px;
width: 50px;
}
復(fù)制代碼
看到子元素的背景色完全遮住了父元素的背景色，得到結(jié)論div的層級高于background
接著比較border和div的層級，給子元素加上如下css
.son{
background-color: blue;
height: 50px;
width: 50px;
margin-top: -10px;
}
復(fù)制代碼
得到結(jié)論，塊級的層級高于border
總結(jié)上述結(jié)論：background層級 < border層級 < 塊級層級
加入float
設(shè)計再加一個float，讓兩個子元素比較
html:
css:
.sonFloat{
background-color: rgba(250, 190, 88, 0.8);
height: 30px;
width: 30px;
float: left;
}
復(fù)制代碼
此時float的元素設(shè)置了透明度為0.8的背景色，結(jié)果顯示，float能蓋住原先div的背景色，證明了塊級的層級小于float
inline和inline-block
在
證明內(nèi)聯(lián)的層級大于塊級
對代碼做如下改動
html:
+
css:
+ .sonInline{
background-color: green;
height: 40px;
width: 40px;
display: inline-block;
margin-bottom: -30px;
}
復(fù)制代碼
所以得出結(jié)論inline的層級大于inline-block的層級大于block的層級
position
代碼再次做改動
.sonInline{
background-color: orange;
width: 100px;
height: 100px;
position: relative;
top: 54px;
}
復(fù)制代碼
看到連文字都被覆蓋了，證明有position的元素的層級是最高的，無可爭議！對同一層級的，元素的表現(xiàn)如何呢？各自做相應(yīng)的實驗，結(jié)果表明，遵循誰在下面誰就覆蓋上面的原則
最后得出結(jié)論：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;
}
復(fù)制代碼
這一切看起來很正常，因為demo01和demo02都加了absoulte，那么此時后出現(xiàn)的排在前面，于是demo02放前面，因為內(nèi)聯(lián)僅僅小于position,于是html中內(nèi)容我是大毛顯示了出來。此時給demo01和demo02加一個z-index
.demo01{
+ z-index=1;
}
.demo01{
+ z-index=0;
}
復(fù)制代碼
此時，demo01的我是小毛出來了，而我是大毛卻消失了，給一個透明度，發(fā)現(xiàn)就在demo01的下面，但是此時，css的排序方式并不符定位的規(guī)則！
所以這邊還要加一個特殊的規(guī)則：層疊上下文
文檔中的層疊上下文由滿足以下任意一個條件的元素形成：
文檔根元素()
position的值為absolute(絕對定位)或relative(相對定位)且z-index的值不為auto(即z-index不為默認(rèn)值)
position的值為fixed或sticky的元素
flex的子元素，且z-index不為auto
gird的子元素，且z-index不為auto
opacity的值不為1
以下任意值不為none的元素：
transform
filter
perspective
clip-path
如果形成了層疊上下文，那么久去比較雙方的z-index或者其他屬性誰高，但是它的內(nèi)部還是按照定位的規(guī)則排列。
總結(jié)
以上是生活随笔為你收集整理的css层叠上下文详解,CSS定位（层叠上下文）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： css搜索的文本框,一个很不错的CSS改
- 下一篇： 微信sdk服务器支付文档,微信支付-普通