今天給大家分享一下逞频,z-index和層疊上下文如何形成的进泼?
1.背景介紹
層疊上下文惕稻,就是在呈現(xiàn)的時候決定哪個元素在上竖共、哪個元素在下,初學的時候覺得這東西應該就是跟z-index的大小有關俺祠,然而并沒有這么簡單公给,我們來感受下借帘。
2.知識剖析
先了解一下z-index的基本信息:
在W3C是這樣描述的:每個元素都具有三維空間位置,除了水平和垂直位置外淌铐,還能在 "Z軸" 上層層相疊肺然、排列。元素在 "Z軸" 方向上的呈現(xiàn)順序腿准,由層疊上下文和層疊級別決定际起。在文檔中,每個元素僅屬于一個層疊上下文释涛。元素的層疊級別為整型加叁,它描述了在相同層疊上下文中元素在 "Z軸" 上的呈現(xiàn)順序。同一層疊上下文中唇撬,層疊級別大的顯示在上,層疊級別小的顯示在下展融,相同層疊級別時窖认,遵循后來居上的原則,即其在HTML文檔中的順序告希。不同層疊上下文中扑浸,元素呈現(xiàn)順序以父級層疊上下文的層疊級別來決定呈現(xiàn)的先后順序,與自身的層疊級別無關燕偶。
z-index語法:
z-index: auto(自動喝噪,默認值) | integer(整數(shù)) |? inherit (繼承)
z-index 接受的屬性值為:關鍵字auto和整數(shù),整數(shù)可以是負值指么。
需要注意的是 z-index 雖然很給力酝惧,卻只能應用于定位元素(即設置了 position 屬性為非 static 值),其它情況下伯诬,z-index 將被忽略晚唇。
3.常見問題
處理兩個或兩個以上盒子之間z-index的復雜關系?
什么是層疊上下文(STACKING CONTENT)
在一個層疊上下文盗似,所有的元素根據(jù)規(guī)則從下到上排列哩陕,分成了七個等級:
1、背景和邊框 — 形成層疊上下文的元素的背景和邊框赫舒。 層疊上下文中的最低等級悍及。
2、負z-index值 — 層疊上下文內(nèi)有著負z-index值的子元素接癌。
3心赶、塊級盒 — 文檔流中非行內(nèi)非定位子元素。
4扔涧、浮動盒 — 非定位浮動元素园担。
5届谈、行內(nèi)盒 — 文檔流中行內(nèi)級別非定位子元素。
6弯汰、z-index: 0 — 定位元素艰山。這些元素形成了新的層疊上下文。
7咏闪、正z-index值 — 定位元素曙搬。層疊上下文中的最高等級
層疊上下文是具有包含關系的,同時又各自應用層疊規(guī)則而互不影響鸽嫂,也就是說一個層疊上下文中有一個z-index值很大的定位元素纵装,它依然會處于層疊等級高于創(chuàng)建該層疊上下文元素的元素的下方。
4.解決方案
1,如果兩個元素都沒有定位發(fā)生位置重合現(xiàn)象或者兩個都已定位元素且z-index相同發(fā)生位置重合現(xiàn)象据某,那么按文檔流順序橡娄,后面的覆蓋前面的。
2,如果兩個元素都沒有設置z-index癣籽,使用默認值挽唉,一個定位一個沒有定位,那么定位元素覆蓋未定位元素
3,如果父元素z-index有效筷狼,那么子元素無論是否設置z-index都和父元素一致瓶籽,在父元素上方
4,如果父元素z-index失效(未定位或者使用默認值),那么定位子元素的z-index設置生效
5,如果兄弟元素的z-index生效埂材,那么其子元素覆蓋關系有父元素決定
5.編碼實戰(zhàn)
上面
6.擴展思考
問題:為什么內(nèi)聯(lián)元素的層疊順序要比塊狀元素高塑顺?
內(nèi)聯(lián)元素一般都是基于語義級(semantic)的基本元素,它只能容納文本或者其他內(nèi)聯(lián)元素俏险,通常被包括在塊元素中使用严拒,常見內(nèi)聯(lián)元素有“a、b寡喝、br”等,基本上可以說成內(nèi)聯(lián)元素變成了塊狀元素的子元素糙俗,所以子元素也就是內(nèi)聯(lián)元素要高于塊狀元素。
1.行內(nèi)塊的級別比塊級元素的層級高预鬓,行內(nèi)塊能覆蓋塊
2.z-index不能和和folat一起使用巧骚,因為他的層級已經(jīng)規(guī)定在z-index:0;和z-index負數(shù)之間
2..z-index不能和和folat ?folat在z-index負數(shù) ?和z-index為0 之間
7.參考文獻
鏈接:http://www.reibang.com/p/226c585c0cd0
W3C:http://www.w3school.com.cn/cssref/pr_pos_z-index.asp
關于z-index那些你不知道的事:https://webdesign.tutsplus.com/zh-hans/articles/what-you-may-not-know-about-the-z-index-property--webdesign-16892
Stacking Content層疊上下文:https://leozdgao.me/stacking-content-basic/