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

資訊專欄INFORMATION COLUMN

z-index

vincent_xyb / 3510人閱讀

摘要：層疊上下文是中的一個三維的概念如果一個元素含有層疊上下文我們就可以理解為這個元素在軸上就高人一等軸表示用戶與屏幕之間并不存在的的垂直線通俗點(diǎn)講就是人眼看屏幕的視線這條垂直于屏幕的線擁有層疊上下文的元素包括頁面根元素天生具有層疊上下文稱之為根

stacking context

層疊上下文(stacking context)是HTML中的一個三維的概念.如果一個元素含有層疊上下文,我們就可以理解為這個元素在Z軸上就"高人一等".

Z軸表示用戶與屏幕之間并不存在的的垂直線,通俗點(diǎn)講,就是人眼看屏幕的視線這條垂直于屏幕的線

擁有層疊上下文的元素包括:

頁面根元素天生具有層疊上下文,稱之為"根層疊上下文"

z-index值為數(shù)值的定位元素也具有層疊上下文

其他屬性也可以具有層疊上下文

stacking level

層疊水平(stacking level),決定了同一個層疊上下文中元素在z軸上的顯示順序

普通元素的層疊水平優(yōu)先由層疊上下文決定,因此層疊水平的比較只有在當(dāng)前層疊上下文元素中才有意義

需要注意的是,千萬不要把層疊水平和CSS的z-index屬性混為一談.沒錯,某些情況下z-index確實(shí)可以影響層疊水平,但是只限于定位元素以及flex/inline-flex子元素,而層疊水平所有的元素都存在

stacking order

層疊順序(stacking order)是元素發(fā)生層疊時候有著特定的垂直顯示順序

注意,上面的層疊上下文和層疊水平是概念,而這里的層疊順序是規(guī)則

上圖是著名的7階層疊水平(stacking level)圖

上圖的層疊順序inline/inline-block水平盒子(內(nèi)容)>float浮動盒子以及block塊狀水平盒子(布局)>background/border(裝飾),因?yàn)檫@樣更符合頁面加載的功能和視覺呈現(xiàn)

層疊順序?qū)嵗?/p>

在這個例子中,inline-block屬性的紅色div,inline屬性span > float:left屬性圖片 > block屬性綠色div.但是有一點(diǎn),blockdiv的文字會在inline-blockdiv背景色的上面,因?yàn)?b>background層疊順序最低

z-index與stacking context

定位元素默認(rèn)z-index:auto可以看成是z-index:0

z-index不為auto的定位元素會創(chuàng)建層疊上下文(IE7除外,auto也會創(chuàng)建)

z-index層疊順序的比較止步于父級層疊上下文

三個實(shí)例

在第一個例子中,應(yīng)用了position:relative屬性的圖片z-index:auto,層疊順序大于普通inline-block元素,所以定位圖片覆蓋普通圖片

在第二個例子中,父容器設(shè)置position:absolute,子元素圖片設(shè)置position:relative,這時,我們給圖片添加z-index:-1,圖片跑到背景色后面了,原因是設(shè)置了z-index的圖片的層疊上下文元素是頁面根元素;這時,我們再給父容器添加z-index:0,圖片的層疊上下文元素變?yōu)楦溉萜?此時,圖片又回到背景色之上,因?yàn)?b>z-index:-1層疊水平在層疊上下文背景色之上

第三個例子中,雖然第一個子元素設(shè)置z-index:999999,第二個子元素z-index:-1,但是它們的層疊上下文起作用的是父元素的z-index,所以第一個圖片被第二個圖片覆蓋

其它屬性與層疊上下文

其它參與層疊上下文的屬性:

z-index值不為auto的flex項(xiàng)(父元素display:flex|inline-flex).

元素的opacity值不是1.

元素的transform值不是none.

元素mix-blend-mode值不是normal.

元素的filter值不是none.

元素的isolation值是isolate.

position:fixed聲明(IE不支持)

will-change指定的屬性值為上面任意一個.

元素的-webkit-overflow-scrolling設(shè)為touch.(移動端)

其它屬性與stacking context實(shí)例

上面的實(shí)例展示了1-8條規(guī)則,我們設(shè)置8個div盒子,盒子里面放置了8張圖片,然后給圖片position:relative并且z-index:-1,這時,圖片的層疊上下文元素是根層疊上下文,圖片被背景色覆蓋,然后我們在div盒子分別使用了8條規(guī)則,盒子變?yōu)閷盈B上下文,圖片出現(xiàn)在背景色上面

這里有個問題,本來是8個圖片,這里出現(xiàn)的只有7個,原因是同時存在transform和position:fixed的時候position:fixed失效,導(dǎo)致例7圖片層疊上下文被覆蓋

z-index與其它c(diǎn)ss屬性層疊上下文

不依賴z-index的層疊上下文元素的層疊順序均是z-index:auto級別

依賴z-index的層疊上下文元素的層疊順序取決于z-index值

依賴z-index值創(chuàng)建層疊上下文的情況:

position值為relative/absolute或者fixed(非IE瀏覽器)

display:flex|inline-flex容器的子flex項(xiàng)

z-index與定位元素

這個例子中,我們先設(shè)置了一個圖片層疊上下文,然后設(shè)置了一個父容器是flex,子元素z-index:1的層疊上下文;

這里,參與比較的是第一個圖片層疊上下文,和flex的子元素圖片層疊上下文,決定層疊順序的是z-index的大小,也就是誰大誰在上面

層疊上下文導(dǎo)致的圖片上的文字消失現(xiàn)象

這個例子有個現(xiàn)象,當(dāng)動畫在運(yùn)行時,文字跑到圖片后面去了,基于前面學(xué)到的東西,當(dāng)opacity不為1時,是具有層疊上下文的,層疊級別跟z-index:auto一樣,也就是跟absolute是同級的,基于誰大誰在上面的原則,圖片會覆蓋文字

解決方法:

調(diào)整DOM流先后順序,將文字放在圖片后面

提高文字的層疊順序,例如z-index:1

z-index相關(guān)實(shí)踐

1.最小化影響原則

目的:避免z-index嵌套層疊關(guān)系混亂

原因:

元素的層疊水平主要由所在的層疊上下文決定;

IE7 z-index:auto也會新建層疊上下文;

做法:

避免使用定位屬性;

定位屬性從大容器平級分離為私有小容器

可以參考relative相關(guān)實(shí)踐

2.盡量不使用z-index大于2

目的:避免z-index混亂,一個元素比一個元素z-index大的樣式問題

原因:多人協(xié)作及后期維護(hù)

做法:
對于非浮動元素,避免設(shè)置z-index值,z-index值沒有任何必要超過2

3.組件層級計(jì)數(shù)器

目的:避免浮層組件因z-index被覆蓋的問題

原因:

總會遇到意想不到的高層級元素

組件的覆蓋規(guī)則具有動態(tài)性,比如說一個頁面有若干個彈框

做法:通過JS獲得body下子元素的最大z-index值

4.負(fù)值z-index與可訪問性隱藏

使用可訪問性隱藏來解決表單提交按鈕低版本瀏覽器兼容性問題

在本例中,可以使用z-index:-1隱藏原始的submit而使用美化過的label控制提交;如果不需要兼容低版本瀏覽器可以直接使用display:none

深入理解CSS中的層疊上下文和層疊順序

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

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

相關(guān)文章

  • 【學(xué)習(xí)筆記】CSS深入理解之z-index

    摘要：張鑫旭的深入理解之學(xué)習(xí)筆記層疊上下文什么是層疊上下文在軸上延伸出一個層級，離父級層疊上下文的頂部更近。遵循后來居上和誰大誰上的層疊原則。 張鑫旭的CSS深入理解之z-index學(xué)習(xí)筆記 層疊上下文 什么是層疊上下文？在z軸上延伸出一個層級，離父級層疊上下文的頂部更近。 如何產(chǎn)生層疊上下文？ 根元素具有根層疊上下文 z-index不為auto的定位元素 一個 z-index 值不為 ...

    Steven 評論0 收藏0

  • Web 組件化中如何管理 z-index

    摘要：接著我們解釋我們所看到的現(xiàn)象。刪除上述所說的運(yùn)行效果這種架構(gòu)并非沒有缺點(diǎn)。例如，你將無法在和內(nèi)創(chuàng)建此類疊加層查看示例然而，根據(jù)我的經(jīng)驗(yàn)，這很少是一個問題。找到兩個沒有正確層疊的元素的第一個祖先組件，并根據(jù)需要更改該組件中的。 想閱讀更多優(yōu)質(zhì)文章請猛戳GitHub博客,一年百來篇優(yōu)質(zhì)文章等著你！ z-index 屬性，盡管已經(jīng)寫了這么多，仍然被廣泛地誤解和錯誤地處理。在復(fù)雜的單頁web應(yīng)...

    FrancisSoung 評論0 收藏0

  • Web 組件化中如何管理 z-index

    摘要：接著我們解釋我們所看到的現(xiàn)象。刪除上述所說的運(yùn)行效果這種架構(gòu)并非沒有缺點(diǎn)。例如，你將無法在和內(nèi)創(chuàng)建此類疊加層查看示例然而，根據(jù)我的經(jīng)驗(yàn)，這很少是一個問題。找到兩個沒有正確層疊的元素的第一個祖先組件，并根據(jù)需要更改該組件中的。 想閱讀更多優(yōu)質(zhì)文章請猛戳GitHub博客,一年百來篇優(yōu)質(zhì)文章等著你！ z-index 屬性，盡管已經(jīng)寫了這么多，仍然被廣泛地誤解和錯誤地處理。在復(fù)雜的單頁web應(yīng)...

    yeooo 評論0 收藏0

  • z-index與堆疊上下文

    摘要：與堆疊上下文動機(jī)最近項(xiàng)目中同時使用和遇到一些問題，值設(shè)了很大，但是不起作用?？偨Y(jié)設(shè)置且不為，將產(chǎn)生堆疊上下文，堆疊規(guī)則異于常規(guī)堆疊。，，生效產(chǎn)生堆疊上下文，分別是。此時生成堆疊上下文，其子元素最終為。 z-index與堆疊上下文 動機(jī) 最近項(xiàng)目中同時使用z-index和opacity遇到一些問題，z-index值設(shè)了很大，但是不起作用。找了一些資料，重新梳理了z-index的重疊規(guī)則。...

    Aldous 評論0 收藏0

  • 深入剖析z-index屬性

    摘要：聲明，部分瀏覽器需要數(shù)字配合指定的屬性值為上面任意一個的作用增強(qiáng)頁面渲染性能，即準(zhǔn)備圖形處理器讓瀏覽器加速渲染的什么是圖形處理器是與處理和繪制圖形相關(guān)的硬件。而則是真正的行為觸發(fā)之前告訴瀏覽器，提前預(yù)約從容不迫突然造訪手忙腳亂。一、z-index七階層疊順序表 1.層疊順序的大小比較： background/border < 負(fù)z-index < block塊狀水平盒子 < float浮動盒...

    scq000 評論0 收藏0

發(fā)表評論

0條評論

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