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

資訊專欄INFORMATION COLUMN

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

pcChao / 2933人閱讀

摘要:同一個層疊上下文中,層疊級別相同的兩個元素,依據(jù)它們在文檔流中的順序,寫在后面的將會覆蓋前面的。因此,元素的層疊關(guān)系不僅與它在堆疊上下文中所屬的層疊級別有關(guān),還與它所在的堆疊上下文的順序有關(guān)。

w3c規(guī)范里的stacking context,譯作層疊上下文,最主要的作用還是用來比較一個擁有定位元素(position:!static)的元素的z軸層疊關(guān)系(z-index)。

先上一個經(jīng)典的例子:

http://jsbin.com/pupibo/11/edit][1]

代碼:

html:

  
A z-index:1;
B
C

css

#a,#b,#c{
  position:absolute;
  width:200px;
  height:100px;
}
#a{
  left:20px;
  top:20px;
  background:yellow;
  z-index:1;
}
#b{
  left:50px;
  top:50px;
  background:pink;
}
#c{
  left:80px;
  top:80px;
  background:cyan;
}

效果:

問題:在不給#b #c設(shè)置z-index的情況下,如何讓#a置于其他兩者的后面?

答案你知道的,給包裹#adiv增加樣式:

  div:first-of-type{
    opacity:0.9999;
  }

其實這里就涉及到堆疊上下文的概念了。context這個名詞在css相關(guān)規(guī)范里見得多了,最著名的有塊級格式上下文(block formatting context)。那么什么是上下文(context)呢?按我的理解,應(yīng)該是某種類似環(huán)境的東西,一旦一個元素被加入一個context,他們的某些屬性值會放在一起比較,最終的比較結(jié)果會影響到他們的視覺呈現(xiàn)。

而處于同一個堆疊格式上下文內(nèi)的元素,它們會相互比較自己在z軸疊放的順序,從而知道誰應(yīng)該在誰的上面、誰應(yīng)該在誰的下面(貴圈真亂 (。?д?。) ):

同一個層疊上下文中,層疊級別(即z-index屬性值)大的顯示在上面,反之顯示在下面。

同一個層疊上下文中,層疊級別相同的兩個元素,依據(jù)它們在HTML文檔流中的順序,寫在后面的將會覆蓋前面的。

那么問題來了,可不可能產(chǎn)生一個新的層疊上下文?

當(dāng)然可能,根據(jù)規(guī)范,以下情況將會產(chǎn)生一個新的層疊上下文:

當(dāng)一個元素是文檔的根元素時,在完整的html文檔里,根元素是html標(biāo)簽;

當(dāng)元素擁有一個值為非staticposition且擁有一個值為非autoz-index樣式時;

當(dāng)元素擁有一個值小于1opacity樣式時;

當(dāng)元素擁有一個值不為none且有效的transform樣式時;

當(dāng)元素擁有一個值為display:flex|inline-flex的樣式且z-index不為auto時;

當(dāng)元素擁有一個值不為normalmix-blend-mode樣式時;

當(dāng)元素擁有一個值為isolateisolation樣式時;

當(dāng)元素的will-change樣式指定為上述任意一個值時;

在移動端,當(dāng)元素擁有一個值為touch-webkit-overflow-scrolling值時;

當(dāng)元素的filter(此處為CSS3的濾鏡)值不為none時;

IE6,7 下,當(dāng)元素擁有一個值為非staticposition的樣式時,即使z-index未定義。

因此,元素的層疊關(guān)系不僅與它在堆疊上下文中所屬的層疊級別有關(guān),還與它所在的堆疊上下文的順序有關(guān)。這就是上面例子的全部秘密。而前文中的例子,其實還有另一種方法,對,給div:first-of-type添加transform:transform-function樣式。

最后,看到特地給ie6/7加粗的那條了嗎?嗯,這就是ie6/7那個著名bug的根源,具體bug解剖請看張鑫旭大大2009年的一篇文章:ie6下z-index犯癲不起作用bug的初步研究,或者@doyoe的這個簡單的demo。

最后附上這道題答案的效果:

http://jsbin.com/pupibo/12

效果圖:

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

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

相關(guān)文章

  • 【Hello CSS】第六章-文檔流與排版

    摘要:作者陳大魚頭正常流什么是正常流其實就是我們?nèi)粘Kf的文檔流。在官方文檔里對應(yīng)的是。然后,包含形成一條線的框的矩形區(qū)域稱為線盒。基線線盒的高度由的計算結(jié)果決定。級層疊上下文被自動視為父級層疊上下文的一個獨立單元。自由分配,由具體情況決定。 作者:陳大魚頭 github: KRISACHAN 正常流 什么是正常流?其實就是我們?nèi)粘Kf的文檔流。在W3C官方文檔里對應(yīng)的是normal ...

    nihao 評論0 收藏0
  • 【Hello CSS】第六章-文檔流與排版

    摘要:作者陳大魚頭正常流什么是正常流其實就是我們?nèi)粘Kf的文檔流。在官方文檔里對應(yīng)的是。然后,包含形成一條線的框的矩形區(qū)域稱為線盒。基線線盒的高度由的計算結(jié)果決定。級層疊上下文被自動視為父級層疊上下文的一個獨立單元。自由分配,由具體情況決定。 作者:陳大魚頭 github: KRISACHAN 正常流 什么是正常流?其實就是我們?nèi)粘Kf的文檔流。在W3C官方文檔里對應(yīng)的是normal ...

    null1145 評論0 收藏0
  • HTML-CSS

    摘要:但是,從字體上來說雪碧圖制作,使用以及相關(guān),圖文。由于采用了編譯,所以能夠保證在瀏覽器不支持標(biāo)準(zhǔn)布局的情況下,回滾到舊版本的,保證移動設(shè)備中能呈現(xiàn)出一樣的布局效果。我不想陷入和的紛爭,但是有一件事是確定的極大的提升了移動端 一勞永逸的搞定 flex 布局 尋根溯源話布局 一切都始于這樣一個問題:怎樣通過 CSS 簡單而優(yōu)雅的實現(xiàn)水平、垂直同時居中。記得剛開始學(xué)習(xí) CSS 的時候,看到 ...

    xiaokai 評論0 收藏0
  • HTML-CSS

    摘要:但是,從字體上來說雪碧圖制作,使用以及相關(guān),圖文。由于采用了編譯,所以能夠保證在瀏覽器不支持標(biāo)準(zhǔn)布局的情況下,回滾到舊版本的,保證移動設(shè)備中能呈現(xiàn)出一樣的布局效果。我不想陷入和的紛爭,但是有一件事是確定的極大的提升了移動端 一勞永逸的搞定 flex 布局 尋根溯源話布局 一切都始于這樣一個問題:怎樣通過 CSS 簡單而優(yōu)雅的實現(xiàn)水平、垂直同時居中。記得剛開始學(xué)習(xí) CSS 的時候,看到 ...

    CHENGKANG 評論0 收藏0
  • 查漏補缺 - 收藏集 - 掘金

    摘要:醞釀許久之后,筆者準(zhǔn)備接下來撰寫前端面試題系列文章,內(nèi)容涵蓋瀏覽器框架分鐘搞定常用基礎(chǔ)知識前端掘金基礎(chǔ)智商劃重點在實際開發(fā)中,已經(jīng)非常普及了。 這道題--致敬各位10年阿里的前端開發(fā) - 掘金很巧合,我在認識了兩位同是10年工作經(jīng)驗的阿里前端開發(fā)小伙伴,不但要向前輩學(xué)習(xí),我有時候還會選擇另一種方法逗逗他們,拿了網(wǎng)上一道經(jīng)典面試題,可能我連去阿里面試的機會都沒有,但是我感受到了一次面試1...

    YuboonaZhang 評論0 收藏0

發(fā)表評論

0條評論

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