国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

vvpvvp / 2098人閱讀

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

從瀏覽器渲染說起

一個頁面的渲染，大致有下幾個步驟

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

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


開頭掛兩篇大神的文章保智商

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

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

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

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

簡單說幾種常見情況：

文檔中后來的居上

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

很顯然如果我有一個負值margin就會看到我上你下的情況

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

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

嗯，這里就你上我下了

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

就不演示了！

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

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

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

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

不得不說這個詞對于我這樣的人從中文上理解簡直是十臉懵逼

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

既然是一個參考對象，那么誰來參考它呢？答案是它的子元素們（其實這并不是完全正確，但是可以先這么認為）。然后這個參考對象什么時候會被用到呢？

直接干巴巴的說個情景：

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

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

如果我爸爸和你爸爸是一個人！OK,這時我和你就是在一個層疊上下文中了，就可以按照上面盜來的層疊等級圖進行誰上誰下的判斷了

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

講的有點繞是不是，沒關(guān)系！再聽我講幾句，你會更暈的

接下來說誰會是 參考對象（創(chuàng)建了層疊上下文）

html天然就是，這就可以去把前面那些簡單的例子套進來了，因為它們的參考對象都是html根元素了，所以可以直接在同一環(huán)境（上下文）比較。

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

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

opacity不等于1

transform不等于none

好了，到這個時候就該上例子了：

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

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

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

然后我們修改下me,加個。。。就加個opacity吧

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

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

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

有錯誤或者寫的爛歡迎指出來批評討論！

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

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/115277.html

相關(guān)文章

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

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

    Steve_Wang_ 評論0 收藏0

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

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

    Donne 評論0 收藏0

  • CSS 中重要的層疊概念

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

    sshe 評論0 收藏0

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

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

    pcChao 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<