文章插圖
有人是不是又有疑惑了？
我們這樣來理解，父元素定位+z-index為數值，所以它產生了一個層疊上下文，此時子元素無論怎么設置z-index都不可能在父元素的下方 。唯一可以實現的方法是將子元素的
z-index設為負值，而父元素只要不產生層疊上下文就可以了 。<style>.outer { position: relative; width: 100px; height: 200px; background: salmon; /**z-index: 3;**/} .inner { position: relative; width: 50px; height: 200px; background: cadetblue; z-index: -1;}</style><div class="outer">父元素 <div class="inner">子元素</div></div>
文章插圖
總結
- 層疊上下文的層疊水平要比普通元素高
- 層疊上下文可以嵌套，內部層疊上下文及其所有子元素均受制于外部的層疊上下文
- 每個層疊上下文不會影響它的兄弟元素，當進行層疊變化或渲染的時，只和該元素的后代元素有關
- 每個層疊上下文是獨立的，當元素發生層疊的時，它的層疊順序依賴在父層疊上下文的層疊順序中
原文首發地址點這里，歡迎大家關注公眾號 「前端南玖」 ， 如果你想進前端交流群一起學習，請點這里我是南玖 ， 我們下期見?。。?
推薦閱讀
- 為什么不建議買nova9pro_華為nova9pro最嚴重缺點
- 陽光之下封瀟聲為什么喝中藥_陽光之下封瀟聲吃藥的原因
- 我的世界怎么用附魔臺附魔書（我的世界是怎么用附魔書附魔的)
- 我的世界幸運附魔書怎么用（我的世界附魔書如何附魔)
- 我的世界附魔書怎么用（我的世界附魔書怎么附魔到武器上)
- mc附魔書怎么用（我的世界穿透附魔書有什么用)
- 我的世界1.16附魔書怎么用（我的世界1.16.2附魔書)
- “Steam”怎么加好友（steam為什么加不了好友)
- n維偏序 方法記錄
- 說說蘆薈膠 我一共用過4款蘆薈膠，分別是自然樂園蘆薈膠、丹姿蘆薈膠、韓束蘆薈膠和百雀羚三生花蘆薈膠。