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

資訊專欄INFORMATION COLUMN

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

pcChao / 2935人閱讀

摘要：同一個(gè)層疊上下文中，層疊級(jí)別相同的兩個(gè)元素，依據(jù)它們?cè)谖臋n流中的順序，寫在后面的將會(huì)覆蓋前面的。因此，元素的層疊關(guān)系不僅與它在堆疊上下文中所屬的層疊級(jí)別有關(guān)，還與它所在的堆疊上下文的順序有關(guān)。

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

先上一個(gè)經(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置于其他兩者的后面？

答案你知道的，給包裹#a的div增加樣式：

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

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

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

同一個(gè)層疊上下文中，層疊級(jí)別（即z-index屬性值）大的顯示在上面，反之顯示在下面。

同一個(gè)層疊上下文中，層疊級(jí)別相同的兩個(gè)元素，依據(jù)它們?cè)贖TML文檔流中的順序，寫在后面的將會(huì)覆蓋前面的。

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

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

當(dāng)一個(gè)元素是文檔的根元素時(shí)，在完整的html文檔里，根元素是html標(biāo)簽；

當(dāng)元素?fù)碛幸粋€(gè)值為非static的position且擁有一個(gè)值為非auto的z-index樣式時(shí)；

當(dāng)元素?fù)碛幸粋€(gè)值小于1的opacity樣式時(shí)；

當(dāng)元素?fù)碛幸粋€(gè)值不為none且有效的transform樣式時(shí)；

當(dāng)元素?fù)碛幸粋€(gè)值為display:flex|inline-flex的樣式且z-index不為auto時(shí)；

當(dāng)元素?fù)碛幸粋€(gè)值不為normal的mix-blend-mode樣式時(shí)；

當(dāng)元素?fù)碛幸粋€(gè)值為isolate的isolation樣式時(shí)；

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

在移動(dòng)端，當(dāng)元素?fù)碛幸粋€(gè)值為touch的-webkit-overflow-scrolling值時(shí)；

當(dāng)元素的filter（此處為CSS3的濾鏡）值不為none時(shí)；

在 IE6,7 下，當(dāng)元素?fù)碛幸粋€(gè)值為非static的position的樣式時(shí)，即使z-index未定義。

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

最后，看到特地給ie6/7加粗的那條了嗎？嗯，這就是ie6/7那個(gè)著名bug的根源，具體bug解剖請(qǐng)看張?chǎng)涡翊蟠?009年的一篇文章：ie6下z-index犯癲不起作用bug的初步研究，或者@doyoe的這個(gè)簡(jiǎn)單的demo。

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

http://jsbin.com/pupibo/12

效果圖：

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

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

相關(guān)文章

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

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

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

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

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

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

  • HTML-CSS

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

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

  • HTML-CSS

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

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

  • 查漏補(bǔ)缺 - 收藏集 - 掘金

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

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

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

0條評(píng)論

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