文章插图
有人是不是又有疑惑了？
我们这样来理解，父元素定位+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款芦荟胶，分别是自然乐园芦荟胶、丹姿芦荟胶、韩束芦荟胶和百雀羚三生花芦荟胶。