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

資訊專欄INFORMATION COLUMN

z-index

vincent_xyb / 3509人閱讀

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

stacking context

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

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

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

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

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

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

stacking level

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

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

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

stacking order

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

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

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

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

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

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

z-index與stacking context

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

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

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

三個(gè)實(shí)例

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

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

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

其它屬性與層疊上下文

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

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指定的屬性值為上面任意一個(gè).

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

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

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

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

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

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

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

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

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

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

z-index與定位元素

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

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

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

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

解決方法:

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

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

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

1.最小化影響原則

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

原因:

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

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

做法:

避免使用定位屬性;

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

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

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

目的:避免z-index混亂,一個(gè)元素比一個(gè)元素z-index大的樣式問(wèn)題

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

做法:
對(duì)于非浮動(dòng)元素,避免設(shè)置z-index值,z-index值沒(méi)有任何必要超過(guò)2

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

目的:避免浮層組件因z-index被覆蓋的問(wèn)題

原因:

總會(huì)遇到意想不到的高層級(jí)元素

組件的覆蓋規(guī)則具有動(dòng)態(tài)性,比如說(shuō)一個(gè)頁(yè)面有若干個(gè)彈框

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

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

使用可訪問(wèn)性隱藏來(lái)解決表單提交按鈕低版本瀏覽器兼容性問(wèn)題

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

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

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

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

相關(guān)文章

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

    摘要：張?chǎng)涡竦纳钊肜斫庵畬W(xué)習(xí)筆記層疊上下文什么是層疊上下文在軸上延伸出一個(gè)層級(jí)，離父級(jí)層疊上下文的頂部更近。遵循后來(lái)居上和誰(shuí)大誰(shuí)上的層疊原則。 張?chǎng)涡竦腃SS深入理解之z-index學(xué)習(xí)筆記 層疊上下文 什么是層疊上下文？在z軸上延伸出一個(gè)層級(jí)，離父級(jí)層疊上下文的頂部更近。 如何產(chǎn)生層疊上下文？ 根元素具有根層疊上下文 z-index不為auto的定位元素 一個(gè) z-index 值不為 ...

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

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

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

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

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

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

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

  • z-index與堆疊上下文

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

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

  • 深入剖析z-index屬性

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

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

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

0條評(píng)論

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