z-index和疊加上下文是如何形成

今天給大家分享一下逞频,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/

最后編輯于
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末格二,一起剝皮案震驚了整個濱河市劈彪,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌顶猜,老刑警劉巖沧奴,帶你破解...
    沈念sama閱讀 216,402評論 6 499
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異长窄,居然都是意外死亡滔吠,警方通過查閱死者的電腦和手機纲菌,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,377評論 3 392
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來疮绷,“玉大人翰舌,你說我怎么就攤上這事《В” “怎么了椅贱?”我有些...
    開封第一講書人閱讀 162,483評論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長只冻。 經(jīng)常有香客問我庇麦,道長,這世上最難降的妖魔是什么喜德? 我笑而不...
    開封第一講書人閱讀 58,165評論 1 292
  • 正文 為了忘掉前任山橄,我火速辦了婚禮,結果婚禮上舍悯,老公的妹妹穿的比我還像新娘驾胆。我一直安慰自己,他們只是感情好贱呐,可當我...
    茶點故事閱讀 67,176評論 6 388
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著入桂,像睡著了一般奄薇。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上抗愁,一...
    開封第一講書人閱讀 51,146評論 1 297
  • 那天馁蒂,我揣著相機與錄音,去河邊找鬼蜘腌。 笑死沫屡,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的撮珠。 我是一名探鬼主播沮脖,決...
    沈念sama閱讀 40,032評論 3 417
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼芯急!你這毒婦竟也來了勺届?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 38,896評論 0 274
  • 序言:老撾萬榮一對情侶失蹤娶耍,失蹤者是張志新(化名)和其女友劉穎免姿,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體榕酒,經(jīng)...
    沈念sama閱讀 45,311評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡胚膊,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,536評論 2 332
  • 正文 我和宋清朗相戀三年故俐,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片紊婉。...
    茶點故事閱讀 39,696評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡药版,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出肩榕,到底是詐尸還是另有隱情刚陡,我是刑警寧澤,帶...
    沈念sama閱讀 35,413評論 5 343
  • 正文 年R本政府宣布株汉,位于F島的核電站筐乳,受9級特大地震影響,放射性物質發(fā)生泄漏乔妈。R本人自食惡果不足惜蝙云,卻給世界環(huán)境...
    茶點故事閱讀 41,008評論 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望路召。 院中可真熱鬧勃刨,春花似錦、人聲如沸股淡。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,659評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽唯灵。三九已至贾铝,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間埠帕,已是汗流浹背垢揩。 一陣腳步聲響...
    開封第一講書人閱讀 32,815評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留敛瓷,地道東北人叁巨。 一個月前我還...
    沈念sama閱讀 47,698評論 2 368
  • 正文 我出身青樓,卻偏偏與公主長得像呐籽,于是被迫代替她去往敵國和親锋勺。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 44,592評論 2 353

推薦閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案绝淡? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,748評論 1 92
  • 1.z-index基礎 z-index屬性指定了元素及其子元素的[z順序]宙刘,而[z順序]可以決定當元素發(fā)生覆蓋的時...
    徐國軍_plus閱讀 6,355評論 1 6
  • 第一節(jié):z-index基礎 較大的z-index會覆蓋較小的那個z-index元素 z-index:auto 默認...
    胖魚尾巴閱讀 1,008評論 0 0
  • 我和還哥都還有一年就都大學畢業(yè)了悬包,而我們的愛情長跑似乎在畢業(yè)以后還要持續(xù)很長一段時間。 從大一入學到現(xiàn)...
    Adorer沐子涵閱讀 586評論 0 4
  • 文/車厘子 1 年輕的時候撑瞧,自恃自己讀書多棵譬,仗著“腹有詩書氣自華”,在江湖上很是橫行了幾年≡に牛現(xiàn)在想來订咸,到底還是自己...
    作者車厘子閱讀 327評論 2 6