Z-index 層疊上下文和層疊水平

SillyMonkey 發布于2019-08-29 15:12 / 779人閱讀

摘要：還需要注意的一點是，具有層疊上下文的元素比普通元素要更靠近眼睛。需要記住的是，內部的層疊上下文及其子元素均受制于外部的層疊上下文，下面是層疊順序，從遠到近。定位元素與傳統層疊上下文使用了或的定位元素，且的值是數字會產生疊上下文。

作者：心葉
時間：2018-04-27 11:49

第一步：基本概念。

層疊上下文是一個概念上的東西，學過編譯原理的人應該對這里的上下文很清楚，而層疊不過就是一個詞罷了，解釋一下就是，根據層疊規則決定位置的一個環境。還需要注意的一點是，具有層疊上下文的元素比普通元素要更靠近眼睛。

層疊水平也是一個概念上的東西，用大白話說就是：在一個層疊上下文的環境下，里面的元素在z軸上的排列順序的規則，而層疊順序就是這里說的具體規則，是實踐的東西。

第二步：層疊順序。

需要記住的是，內部的層疊上下文及其子元素均受制于外部的層疊上下文，下面是層疊順序，從遠到近。

1.層疊上下文background/border；

2.負z-index；

3.block塊狀盒子模型；

4.float浮動盒子；

5.z-index為auto或看成0的不依賴z-index的上下文；

6.z-index為auto或看成0；

7.正z-index。

第三步：產生條件。

根層疊上下文（指的是頁面根元素，也就是元素）。

定位元素與傳統層疊上下文（使用了position:absolute、position:fixed或position:relative的定位元素，且z-index的值是數字會產生疊上下文）。

CSS3與新時代的層疊上下文:

1.一個被設置了display:flex的元素包含的元素對其設置z-index為數值時其會產生層疊上下文；

2.設置了opacity不為1的元素會產生層疊上下文；

3.設置了transform不為none的元素會產生層疊上下文；

4.設置了mix-blend-mode不為normal的元素會產生層疊上下文；

5.設置了filter不為none的元素會產生層疊上下文；

6.設置了isolation:isolate的元素會產生層疊上下文；

7.設置了-webkit-overflow-scrolling的元素會產生層疊上下文（移動端）；

8.設置了will-change的元素會產生層疊上下文。

GPU云服務器云服務器 html按鈕層疊 html層疊順序 html 層疊懸浮 html外部層疊樣式

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

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

z-index

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

vincent_xyb 2019-08-29 12:38 評論0 收藏0
徹底理解z-index，看完還是只會無厘頭的設置9999你打我~~~~

摘要：如果同級父元素不是層疊上下文元素就不需要看父元素的眼色了文章到這里就結束了，希望看完這篇文章的同學可以徹底理解。今天寫代碼用antd-mobile的checkbox時候，想在內容文本后面添加一個icon，并且需要對這個icon綁定事件，發現綁定之后怎么也點不中，調試發現原來被層層嵌套的dom元素蓋住了，肯定是z-index在作祟。可是按照我之前對z-index的了解（自信滿滿）卻怎么...

bladefury 2019-08-02 16:16 評論0 收藏0
徹底理解z-index，看完還是只會無厘頭的設置9999你打我~~~~

摘要：如果同級父元素不是層疊上下文元素就不需要看父元素的眼色了文章到這里就結束了，希望看完這篇文章的同學可以徹底理解。今天寫代碼用antd-mobile的checkbox時候，想在內容文本后面添加一個icon，并且需要對這個icon綁定事件，發現綁定之后怎么也點不中，調試發現原來被層層嵌套的dom元素蓋住了，肯定是z-index在作祟。可是按照我之前對z-index的了解（自信滿滿）卻怎么...

RobinTang 2019-08-30 10:51 評論0 收藏0
z-index和層疊上下文

摘要：層疊上下文元素的特性層疊上下文的層疊水平要比普通元素高層疊上下文可以嵌套，內部層疊上下文及其所有子元素均受制于外部的層疊上下文。層疊上下文特性里最后一條規則，每個層疊上下文都是獨立的。 z-index基礎介紹：三維坐標空間里，x軸通常用來表示水平位置，y軸來表示垂直位置，還有z軸來表示在紙面內外方向上的位置，像下面的圖片一樣： showImg(https://segmentfault....

Fundebug 2019-08-29 15:16 評論0 收藏0