首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

彻底搞懂CSS层叠上下文、层叠等级、层叠顺序、z-index

具象的比喻:你可以把层叠上下文元素理解为理解为该元素当了官,而其他非层叠上下文元素则可以理解为普通群众。凡是“当了官的元素”就比普通元素等级要高,也就是说元素在Z轴上更靠上,更靠近观察者。...什么是“层叠顺序” 说完“层叠上下文”和“层叠等级”,我们再来说说“层叠顺序”。“层叠顺序”(stacking order)表示元素发生层叠时按照特定的顺序规则在Z轴上垂直显示。...由此可见,前面所说的“层叠上下文”和“层叠等级”是一种概念,而这里的“层叠顺序”是一种规则。 ? 在不考虑 CSS3 的情况下,当元素发生层叠时,层叠顺讯遵循上面途中的规则。...这么多概念规则,来点最实际的,有没有一个“套路”当遇到元素层叠时,能很清晰地判断出他们谁在上谁在下呢?答案是——肯定有啊!...此时,在层叠顺序规则中,z-index值小于0的.child会被普通的block块级元素.parent覆盖。

2.4K31
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    CSS 层叠相关知识指北

    也就是说由于红色的div生成了层叠上下文,从原来置于蓝色的div下方变为上方了。其他条件各位看官可以自行实现。 层叠水平 看起来还是蛮简单的对吧?那现在来理解下一个概念:层叠水平。...层叠顺序 最后就是重头戏啦,各种东西怎么摆放的,都是有规则的,这就是层叠顺序了。...先不谈其他规则,其实根据之前的例子,已经能总结出最基本的规则:如果两个元素在层叠顺序中所在的位置一样,那么后来者居上。 比如这个: 说某个元素形成了层叠上下文,那么它在层叠顺序中的位置与z-index为0或者auto的元素相同;而且如果两个元素在层叠顺序中所在的位置一样,那么后来者居上。因此应该蓝色最上面?...完美对应这条规则。然而.div1Child形成了自己的层叠上下文,是一个独立的“小箱子”啊,在同一层叠上下文中,z-index生效的情况下,值更大的排在上面,对吧?

    57510
    领券