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

資訊專欄INFORMATION COLUMN

z-index

vincent_xyb / 3501人閱讀

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

stacking context

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

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

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

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

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

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

stacking level

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

普通元素的層疊水平優先由層疊上下文決定,因此層疊水平的比較只有在當前層疊上下文元素中才有意義

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

stacking order

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

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

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

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

層疊順序實例

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

z-index與stacking context

定位元素默認z-index:auto可以看成是z-index:0

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

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

三個實例

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

在第二個例子中,父容器設置position:absolute,子元素圖片設置position:relative,這時,我們給圖片添加z-index:-1,圖片跑到背景色后面了,原因是設置了z-index的圖片的層疊上下文元素是頁面根元素;這時,我們再給父容器添加z-index:0,圖片的層疊上下文元素變為父容器,此時,圖片又回到背景色之上,因為z-index:-1層疊水平在層疊上下文背景色之上

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

其它屬性與層疊上下文

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

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

元素的opacity值不是1.

元素的transform值不是none.

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

元素的filter值不是none.

元素的isolation值是isolate.

position:fixed聲明(IE不支持)

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

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

其它屬性與stacking context實例

上面的實例展示了1-8條規則,我們設置8個div盒子,盒子里面放置了8張圖片,然后給圖片position:relative并且z-index:-1,這時,圖片的層疊上下文元素是根層疊上下文,圖片被背景色覆蓋,然后我們在div盒子分別使用了8條規則,盒子變為層疊上下文,圖片出現在背景色上面

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

z-index與其它css屬性層疊上下文

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

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

依賴z-index值創建層疊上下文的情況:

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

display:flex|inline-flex容器的子flex項

z-index與定位元素

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

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

層疊上下文導致的圖片上的文字消失現象

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

解決方法:

調整DOM流先后順序,將文字放在圖片后面

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

z-index相關實踐

1.最小化影響原則

目的:避免z-index嵌套層疊關系混亂

原因:

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

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

做法:

避免使用定位屬性;

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

可以參考relative相關實踐

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

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

原因:多人協作及后期維護

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

3.組件層級計數器

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

原因:

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

組件的覆蓋規則具有動態性,比如說一個頁面有若干個彈框

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

4.負值z-index與可訪問性隱藏

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

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

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112034.html

相關文章

  • 【學習筆記】CSS深入理解之z-index

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

    Steven 評論0 收藏0

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

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

    FrancisSoung 評論0 收藏0

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

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

    yeooo 評論0 收藏0

  • z-index與堆疊上下文

    摘要：與堆疊上下文動機最近項目中同時使用和遇到一些問題，值設了很大，但是不起作用。總結設置且不為，將產生堆疊上下文，堆疊規則異于常規堆疊。，，生效產生堆疊上下文，分別是。此時生成堆疊上下文，其子元素最終為。 z-index與堆疊上下文 動機 最近項目中同時使用z-index和opacity遇到一些問題，z-index值設了很大，但是不起作用。找了一些資料，重新梳理了z-index的重疊規則。...

    Aldous 評論0 收藏0

  • 深入剖析z-index屬性

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

    scq000 評論0 收藏0

發表評論

0條評論

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