CSS堆疊上下文有什么作用?這個(gè)問(wèn)題可能是我們?nèi)粘W(xué)習(xí)或工作經(jīng)常見(jiàn)到的。希望通過(guò)這個(gè)問(wèn)題能讓你收獲頗深。下面是小編給大家?guī)?lái)的參考內(nèi)容,讓我們一起來(lái)看看吧!
創(chuàng)新互聯(lián)服務(wù)項(xiàng)目包括蘭坪網(wǎng)站建設(shè)、蘭坪網(wǎng)站制作、蘭坪網(wǎng)頁(yè)制作以及蘭坪網(wǎng)絡(luò)營(yíng)銷策劃等。多年來(lái),我們專注于互聯(lián)網(wǎng)行業(yè),利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等,向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案,蘭坪網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前,我們服務(wù)的客戶以成都為中心已經(jīng)輻射到蘭坪省份的部分城市,未來(lái)相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任!
CSS 堆疊上下文是啥?
我們有一個(gè)基本樣式的div,樣式如下:
div{ width: 200px; height: 200px; border:10px solid red; padding:15px; margin:12px; }
效果如下:
這邊有個(gè)問(wèn)題是: border 和 background是什么關(guān)系 ?
這邊有兩個(gè)選項(xiàng):
平行的
border 更靠近用戶
background 更靠近用戶
你們會(huì)選擇哪個(gè)呢?
其實(shí)弄懂這個(gè)很簡(jiǎn)單的,我們只需要把 border 設(shè)置成半透明就知道答案啦
border:10px solid rgba(255, 0, 0, 0, .3);
從運(yùn)行結(jié)果就可以看出,紅色透著綠色,所以是 border 更靠近用戶 。 這時(shí)候你就知道div不是平的,在垂直屏幕上也是有層次關(guān)系的,那這個(gè)層次關(guān)系就叫做堆疊上下文。
接著我們?cè)赿iv里面寫個(gè) ‘你好,世界’,效果如下:
這里又引發(fā)了一個(gè)問(wèn)題,這個(gè) ‘你好,世界’, 是在哪層了,是在 border 上還是在 border 與 background 之間呢?
這邊我們只需要把'你好'移動(dòng)到border上就可知道原因了,那怎么把文字移動(dòng)過(guò)去呢?這邊我們用 text-indent,樣式如下:
div{ width: 200px; height: 200px; border:10px solid rgb(255, 0, 0); padding:15px; margin:12px; background-color: green; text-indent: -20px; }
效果如下:
從運(yùn)行效果就可以看了,文字是在 border上面的,所以文字區(qū)域(內(nèi)聯(lián)元素)是更靠近用戶的
那如果div里面還有一個(gè)div呢?代碼結(jié)構(gòu)如下:
// html <div class="parent"> 你好,CSS世界 <div class="child"></div> </div>
// css .parent{ width: 200px; height: 200px; border:10px solid rgb(255, 0, 0); padding:15px; margin:12px; background-color: green; text-indent: -20px; } .child{ height: 20px; background:purple; }
效果如下:
又引發(fā)了一個(gè)問(wèn)題,紫色區(qū)域是比文字區(qū)域高還是相反呢?
那怎么驗(yàn)證這個(gè)問(wèn)題了?我們只要把里面的div往上移動(dòng)就行,注意這里不能用 position因?yàn)闉楦淖儗蛹?jí)結(jié)構(gòu), 我們只要用 margin-top 就行了,如:
margin-top:-20px;
效果如下:
你會(huì)發(fā)現(xiàn)文字區(qū)域是在上面的。這邊就得出一個(gè)結(jié)論:
如果div里面有塊級(jí)元素,塊級(jí)元素是蓋不住內(nèi)聯(lián)元素的,換句話說(shuō)內(nèi)聯(lián)元素離用戶更近
那如果里面div有文字呢? 這時(shí)我們需要 寫幾個(gè)字,效果如下:
你會(huì)發(fā)現(xiàn) 子元素的文字區(qū)域會(huì)蓋住父元素的文字區(qū)域,所以這邊又有一個(gè)小的結(jié)論:文字區(qū)域后出現(xiàn)的會(huì)覆蓋前出現(xiàn)的。
來(lái)一個(gè)基本結(jié)構(gòu):
// html <div class="parent"> 你好 <div class="float"> </div> </div> // css .parent{ width: 200px; height: 200px; border:10px solid rgb(255, 0, 0); padding:15px; margin:12px; background-color: green; color: aliceblue; } .float{ height: 40px; width: 40px; background:purple; float: left; }
效果如下:
上面代碼就不解釋了,你們肯定都 知道 ?按上面的套路,這里同樣還是那個(gè)問(wèn)題:你好在上面呢還是這個(gè) float 元素呢?
要驗(yàn)證這個(gè)問(wèn)題,同樣使用 text-indent 那文字向左動(dòng)點(diǎn),這里我直接 上效果了:
從效果圖,我們可以得出 文字區(qū)域是在 浮云元素上面的。
那浮動(dòng)元素是在 文字區(qū)域與內(nèi)部塊級(jí)元素之間呢,還是內(nèi)部塊級(jí)與border元素之間呢?換句話說(shuō)就是 浮動(dòng)元素與塊級(jí)元素哪個(gè)離用戶更近?
我們直接在父級(jí)元素寫一個(gè) child:
// hmtl <div class="parent"> 你好 <div class="float"></div> <div class="child"></div> </div> // css .child{ height: 20px; background: black; }
效果如下:
從上可以看出浮云元素蓋住了 child元素,說(shuō)明浮動(dòng)元素的層級(jí)是比塊級(jí)元素高的。即浮動(dòng)元素是在文字區(qū)域與塊級(jí)元素之間的。
那浮動(dòng)元素里面的文字與外面的文字是怎么樣的呢?這邊我直接在浮動(dòng)里面加了 float文字,效果如下:
你會(huì)發(fā)現(xiàn) 浮動(dòng)里面的文字是蓋不住浮動(dòng)外面文字的。
在上面的基礎(chǔ)上我們?cè)黾右粋€(gè) relative 元素,如下:
// htmk <div class="parent"> 你好 <div class="float">floatt</div> <div class="child"></div> <div class="relative"></div> </div> // css .relative{ width: 100px; height: 100px; background: pink; margin-top: -15px; }
效果如下:
這時(shí)我們給類relative 加上一個(gè):
position:relative;
效果如下:
你會(huì)發(fā)現(xiàn) relative 元素蓋住了浮動(dòng)元素,這說(shuō)明 給元素加一個(gè) relative 定位會(huì)增加對(duì)應(yīng)的一個(gè)層級(jí)。檢查 relative 元素,會(huì)看到:
加了 position:relative定位會(huì)多了一個(gè) z-index:auto 的東西,實(shí)際上你定位,都是按z-index來(lái)計(jì)算的。
這里我們給沒(méi)有定位的 child元素加上一個(gè)z-index:
<div class="parent"> 你好 <div class="float">floatt</div> <div class="child" style="z-index:99999"></div> <div class="relative"></div> </div>
效果如下:
你會(huì)發(fā)現(xiàn) child 元素并沒(méi)有蓋住 relative 元素!
這邊直接 給了結(jié)論了:z-index 只有在 position:relative|absolute
才有效果,如果都是relative,z-index一樣,那么后面會(huì)蓋前面,z-index值大的會(huì)蓋住小的。
我們接著在原有上加一個(gè)relative2,樣式如下:
.relative2{ width: 100px; height: 150px; background: gold; margin-top: -15px; position: relative; }
效果如下:
此時(shí)給 relative2 加上一個(gè) z-index:-1,在看
又得出一個(gè)結(jié)論:z-index為負(fù)值時(shí),是位于 background下面的
這時(shí),我們給.parent元素添加以下兩個(gè)樣式:
position: relative; z-index: 0;
這時(shí)的效果如下:
這時(shí)奇怪的事情就出現(xiàn)了,z-index: -1 的跑到上面來(lái)了。
MDN上有對(duì)什么堆疊給出了一些內(nèi)容,如下 :
其實(shí)我們給.parent元素設(shè)置z-index:0 ,根據(jù)MDN說(shuō)的,我們其實(shí)已經(jīng) 創(chuàng)造一個(gè)層疊上下文 。
那什么是堆疊上下文?下面是張?chǎng)涡褚欢卧模?/p>
其實(shí)這跟美國(guó)一個(gè)大法官說(shuō)的一句話很像:我不知道什么色情,但當(dāng)我看到它是我就知道什么是色情。
CSS堆疊上下文也是類似的道理,你很難說(shuō)出什么是CSS堆疊上下文,但只要它滿足MDN列出的幾種情況,它就是CSS堆疊上下文。
CSS堆疊層疊順序
CSS堆疊上下文是有一個(gè)垂直屏幕上有一個(gè)上關(guān)系的,它們的關(guān)系如下:
所以這就解釋為什么z-index為負(fù)值的時(shí)候,它會(huì)在 background上面,因?yàn)槲覀?z-index:0 時(shí)就創(chuàng)建一個(gè)CSS堆疊上下文。
CSS堆疊上下文作用
下面給一個(gè)基本的內(nèi)容:
// html <div class="parent"> <div class="a relative">a <div class="a1">a1</div> </div> <div class="b relative">b <div class="b1">b1</div> </div> </div> // css .parent{ width: 200px; height: 200px; border:10px solid rgb(255, 0, 0); padding:15px; margin:12px; background-color: green; } .relative{ width:100px; height:100px; background: orange; position: relative; border:1px solid red; } .a1{ position: relative; background:green; } .b1{ position: relative; background:red; }
效果如下:
接著我們?cè)赽1在添加以下樣式:
margin-top: -90px;
b1會(huì)蓋住a1,這個(gè)我們應(yīng)該知道是什么原因了吧?因?yàn)閍1 b1都是塊級(jí)元素,后面會(huì)蓋住前面的,沒(méi)毛?。?/p>
那么 a1 和 b1 的CSS堆疊上下文是誰(shuí)?
我們可以MDN給出的第一句:
根元素,所以a1 和 b1的CSS堆疊上下文就是Html
接著給a1以下樣式:
z-index: 2;
接著給b1以下樣式:
z-index: 0;
效果如下:
a1跑到b1上面了,這個(gè)很好理解,因?yàn)?a1 的z-index:2 比 b1的z-index:0 在,所以a1在上面。
這邊你可能會(huì)說(shuō),a1 的z-index:2比 b1的 z-index:0 永遠(yuǎn)都大,當(dāng)然會(huì)蓋住b1呀!是這樣嗎?我們?cè)囍淖円幌翪SS堆疊上下文。
我們分別給a 和 b各做一個(gè)CSS堆疊上下文: 如下:
.a{ position: relative; z-index: 1; } .b{ position: relative; z-index: 1; }
效果如下:
先分析a 和 b它們是誰(shuí)覆蓋誰(shuí),因?yàn)?兩個(gè)定位和z-index都一樣所以 b 會(huì)覆蓋 a。還有一個(gè)現(xiàn)象有沒(méi)有發(fā)現(xiàn), b1 蓋住了 a1? 明明 a1 的 z-index 大于 b1,這是為什么?為什么小的會(huì)蓋住大的?為什么?
因?yàn)?b 比 a 高一點(diǎn),所以 b 里面的內(nèi)容都會(huì)比 a 高一點(diǎn)。這就是 CSS堆疊上下文一個(gè)特性。
比如說(shuō)阿里巴巴有一個(gè)奇怪的部門叫做政委,是由馬云等一些創(chuàng)始人組成的。在這個(gè)部門里面,你是不是都比其它部門要高級(jí)點(diǎn)。
所以 b1 雖然在 b 里面等級(jí)為0,在 b 是高級(jí)的一個(gè)部門,就是可以壓過(guò)你 a 這個(gè)部門里面的 2 級(jí)的人。
感謝各位的閱讀!看完上述內(nèi)容,你們對(duì)CSS堆疊上下文有什么作用大概了解了嗎?希望文章內(nèi)容對(duì)大家有所幫助。如果想了解更多相關(guān)文章內(nèi)容,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
分享標(biāo)題:CSS堆疊上下文有什么作用
網(wǎng)頁(yè)URL:http://bm7419.com/article10/jccggo.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供動(dòng)態(tài)網(wǎng)站、域名注冊(cè)、靜態(tài)網(wǎng)站、做網(wǎng)站、網(wǎng)站建設(shè)、網(wǎng)站收錄
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)