成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

元素上下層疊關(guān)系總結(jié)

vvpvvp / 2103人閱讀

摘要：嗒噠，什么屬性的元素有什么樣的層疊等級(jí)，按照這張圖上面的問(wèn)題就簡(jiǎn)單了，在負(fù)值上，在或正值之下。咦這里咋還有的事呢，還這么高等級(jí)捏這是因?yàn)閮?nèi)容要大于布局，不展開(kāi)頂部有鑫旭大神的文章，里面有做介紹。

從瀏覽器渲染說(shuō)起

一個(gè)頁(yè)面的渲染，大致有下幾個(gè)步驟

這里直接看最后一步Composite: 渲染層合并，這步是渲染最后一個(gè)步驟，作用就是把之前繪制的圖層（如果有PS的經(jīng)驗(yàn)的話圖層很好理解）按照規(guī)定的順序合并成一個(gè)圖層，元素的層疊誰(shuí)在上面誰(shuí)在下面的關(guān)系，就在這步里被規(guī)定被最終在瀏覽器里體現(xiàn)出來(lái)了。

那么這個(gè)對(duì)層疊理解有什么用呢？。。。。。。。。。。并沒(méi)什么卵用，只是最近看到了而已，科科，直接進(jìn)入正題吧，個(gè)人總結(jié)，會(huì)比較亂。


開(kāi)頭掛兩篇大神的文章保智商

鑫旭大神的深入理解CSS中的層疊上下文和層疊順序

吹雪大大的不起眼的 z-index 卻能牽扯出這么大的學(xué)問(wèn)

其實(shí)看完上面兩篇基本就夠了，不過(guò)如果你實(shí)在閑的慌又想繞一下自己，好嘞，當(dāng)我沒(méi)說(shuō)，請(qǐng)繼續(xù)觀賞

普通我上還是你上的幾種體位

簡(jiǎn)單說(shuō)幾種常見(jiàn)情況：

文檔中后來(lái)的居上

結(jié)構(gòu)如下，這里默認(rèn)box都有長(zhǎng)寬和不同的背景顏色

很顯然如果我有一個(gè)負(fù)值margin就會(huì)看到我上你下的情況

z-index正值>auto(0)>負(fù)值前面的居上

這里首先要明白的是z-index只針對(duì)position不是static的元素起作用。所以我們這里說(shuō)起z-index，那這個(gè)元素一定是和position一起使用。而如果只指定position，那么該元素會(huì)默認(rèn)z-index:auto, have a look

嗯，這里就你上我下了

float的元素和position不為static的元素比普通文檔流的居上

就不演示了！

好了，上面的四種情況算是最正常也是比較容易理解的情況了吧，那么問(wèn)題就來(lái)了,如果我float了和你z-index: -1了發(fā)生重疊呢？如果你z-inidex: auto又或z-inidex: 1了呢？ 是不是要愣一下呢哈哈哈，不急，看個(gè)寶貝。

嗒噠，什么屬性的元素有什么樣的層疊等級(jí)，按照這張圖上面的問(wèn)題就簡(jiǎn)單了，float在負(fù)值z-index上，在auto或正值之下。咦？這里咋還有inline-block的事呢，還這么高等級(jí)捏？？這是因?yàn)閮?nèi)容要大于布局，不展開(kāi)(頂部有鑫旭大神的文章，里面有做介紹)。

OK，我想是時(shí)候迎接這篇文章的高潮了，有孩子的抱穩(wěn)了！上圖中位于最底層的層疊上下文五個(gè)大字看到?jīng)]有？目前我們都是把要比較元素放在以同一個(gè)層疊上下文為基底的環(huán)境內(nèi)做比較，但是所有元素都會(huì)在這一個(gè)環(huán)境內(nèi)嗎？咳咳，我喝口水慢慢噴：

一個(gè)重要的概念——層疊上下文（stacking context）

不得不說(shuō)這個(gè)詞對(duì)于我這樣的人從中文上理解簡(jiǎn)直是十臉懵逼

上下文？context？WTF？好吧，其實(shí)這東西是一個(gè)抽象的概念，如果讓我來(lái)翻譯它，我覺(jué)得比較合適的解釋：創(chuàng)建層疊上下文的元素自己會(huì)成為一個(gè)參考對(duì)象。

既然是一個(gè)參考對(duì)象，那么誰(shuí)來(lái)參考它呢？答案是它的子元素們（其實(shí)這并不是完全正確，但是可以先這么認(rèn)為）。然后這個(gè)參考對(duì)象什么時(shí)候會(huì)被用到呢？

直接干巴巴的說(shuō)個(gè)情景：

頁(yè)面里你隨便找兩個(gè)元素(為了區(qū)分就是我和你吧)，如果我和你要比較誰(shuí)更高人一等怎么辦呢？

瀏覽器會(huì)做的就是不斷向上檢索祖輩元素，直到這個(gè)祖輩創(chuàng)建過(guò)層疊上下文(也就是這個(gè)祖輩可以當(dāng)做參考對(duì)象)。
得到了兩個(gè)元素各自的參考對(duì)象（這里稱呼為我爸爸和你爸爸）然后呢，這時(shí)就分兩種情況！分兩種情況！分兩種情況：

如果我爸爸和你爸爸是一個(gè)人！OK,這時(shí)我和你就是在一個(gè)層疊上下文中了，就可以按照上面盜來(lái)的層疊等級(jí)圖進(jìn)行誰(shuí)上誰(shuí)下的判斷了

如果是不一樣的呢？？？那事情就變得有趣多了——我和你就不!會(huì)!去!進(jìn)!行!比!較!了!！。這場(chǎng)較量一下子會(huì)變成我爸爸和你爸爸間的戰(zhàn)斗了（嘿，你崽子敢動(dòng)我崽子。動(dòng)你崽子咋滴啦，你不服咱兩干啊。干?。?br>然后他們兩就干起來(lái)了，他們兩干的方式就和我和你一樣，去找各自參考對(duì)象——得到我爺爺和你爺爺。然后來(lái)看是否同一個(gè)人，如果是的話我爸爸和你爸爸就是在一個(gè)層疊上下文中了，就會(huì)在爺爺輩這個(gè)參考對(duì)象上比出個(gè)高低，而這個(gè)高低！就是我和你的高低，換句話說(shuō)就是高低由我和你的參考對(duì)象決定了。如果我爺爺和你爺爺還是不一樣呢.....Go on

講的有點(diǎn)繞是不是，沒(méi)關(guān)系！再聽(tīng)我講幾句，你會(huì)更暈的

接下來(lái)說(shuō)誰(shuí)會(huì)是 參考對(duì)象（創(chuàng)建了層疊上下文）

html天然就是，這就可以去把前面那些簡(jiǎn)單的例子套進(jìn)來(lái)了，因?yàn)樗鼈兊膮⒖紝?duì)象都是html根元素了，所以可以直接在同一環(huán)境（上下文）比較。

position不為static且z-index不是auto的元素

display為flex且z-index不是auto的元素

opacity不等于1

transform不等于none

好了，到這個(gè)時(shí)候就該上例子了：

來(lái)理解下，you在這里和me做比較，比較開(kāi)始，首先you尋找參考對(duì)象，上一層me是嗎？顯然不是，因?yàn)閙e沒(méi)有觸發(fā)上面任一條件創(chuàng)建層疊上下文，所以繼續(xù)往上尋找，找到html，好的，是！

對(duì)于me呢，也直接往上找到html，所以這個(gè)例子里me和you是在以html為參考對(duì)象進(jìn)行比較，換句話說(shuō)就是在html創(chuàng)建的層疊上下文環(huán)境中進(jìn)行比較！

然后按照七階圖，負(fù)值index在block元素之下！所以me在you之上

然后我們修改下me,加個(gè)。。。就加個(gè)opacity吧

.me {
    opacity: .9;
    width: 100px;
    height: 100px;
}

按照之前的思路演算一遍，you的參考對(duì)象變成me了！而me仍然是html，然后me和html再做比較，me參考對(duì)象是html，html的參考對(duì)象是html，OK，在同一上下文了，me（you的爸爸）明顯高于html（me的爸爸），所以you高于me

就不舉復(fù)雜的例子了，其實(shí)都一樣，我自己在用這個(gè)規(guī)則去分析的時(shí)候感覺(jué)會(huì)很清晰！好吧這就是爛尾。。。

有錯(cuò)誤或者寫的爛歡迎指出來(lái)批評(píng)討論！

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/115277.html

相關(guān)文章

  • 徹底搞懂CSS層疊上下文、層疊等級(jí)、層疊順序、z-index

    摘要：栗子有兩個(gè)，被包裹在一個(gè)里，被包裹在另一個(gè)盒子里，同時(shí)為兩個(gè)和設(shè)置和屬性效果我們發(fā)下，雖然元素的值為，遠(yuǎn)大于和的值，但是由于的父元素產(chǎn)生的層疊上下文的的值為，的父元素所產(chǎn)生的層疊上下文的值為，所以永遠(yuǎn)在和下面。 前言 最近，在項(xiàng)目中遇到一個(gè)關(guān)于CSS中元素z-index屬性的問(wèn)題，具體問(wèn)題不太好描述，總結(jié)起來(lái)就是當(dāng)給元素和父元素色設(shè)置position屬性和z-index相關(guān)屬性后，頁(yè)面...

    Steve_Wang_ 評(píng)論0 收藏0

  • 徹底搞懂CSS層疊上下文、層疊等級(jí)、層疊順序、z-index

    摘要：栗子有兩個(gè)，被包裹在一個(gè)里，被包裹在另一個(gè)盒子里，同時(shí)為兩個(gè)和設(shè)置和屬性效果我們發(fā)下，雖然元素的值為，遠(yuǎn)大于和的值，但是由于的父元素產(chǎn)生的層疊上下文的的值為，的父元素所產(chǎn)生的層疊上下文的值為，所以永遠(yuǎn)在和下面。 前言 最近，在項(xiàng)目中遇到一個(gè)關(guān)于CSS中元素z-index屬性的問(wèn)題，具體問(wèn)題不太好描述，總結(jié)起來(lái)就是當(dāng)給元素和父元素色設(shè)置position屬性和z-index相關(guān)屬性后，頁(yè)面...

    Donne 評(píng)論0 收藏0

  • CSS 中重要的層疊概念

    摘要：標(biāo)簽中的一切都被置于這個(gè)默認(rèn)的層疊上下文的一個(gè)層疊層上物品放在桌子上。在層疊上下文中，其子元素按照上面解釋的規(guī)則進(jìn)行層疊。在中所有的盒模型元素都處于三維坐標(biāo)系中。 最近在項(xiàng)目的過(guò)程中遇到了一個(gè)問(wèn)題，menu-bar希望始終顯示在最上面，而在之后的元素都顯示在它之下，當(dāng)時(shí)設(shè)置了 z-index 也沒(méi)有效果，不知道什么原因，因此找了一下css有關(guān)層疊方面的資料，解決了這個(gè)問(wèn)題，這里記錄一下...

    sshe 評(píng)論0 收藏0

  • 切圖系列：W3C奇技淫巧之層疊上下文

    摘要：同一個(gè)層疊上下文中，層疊級(jí)別相同的兩個(gè)元素，依據(jù)它們?cè)谖臋n流中的順序，寫在后面的將會(huì)覆蓋前面的。因此，元素的層疊關(guān)系不僅與它在堆疊上下文中所屬的層疊級(jí)別有關(guān)，還與它所在的堆疊上下文的順序有關(guān)。 w3c規(guī)范里的stacking context，譯作層疊上下文，最主要的作用還是用來(lái)比較一個(gè)擁有定位元素（position:!static）的元素的z軸層疊關(guān)系（z-index）。 先上一個(gè)經(jīng)典...

    pcChao 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<