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

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

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

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

    CSS 中重要的层叠概念

    他们各自也都形成了新的层叠上下文,其中包含着新的层叠层。 在层叠上下文中,其子元素按照上面解释的规则进行层叠。...层叠等级 (Stacking Level) 层叠等级 (层叠水平, Stacking Level) 决定了同一个层叠上下文中元素在z轴上的显示顺序的概念; 普通元素的层叠等级优先由其所在的层叠上下文决定...层叠等级的比较只有在同一个层叠上下文元素中才有意义 在同一个层叠上下文中,层叠等级描述定义的是该层叠上下文中的元素在Z轴上的上下顺序 注意,层叠等级并不一定由 z-index 决定,只有定位元素的层叠等级才由...z-index 决定,其他类型元素的层叠等级由层叠顺序、他们在HTML中出现的顺序、他们的父级以上元素的层叠等级一同决定,详细的规则见下面层叠顺序的介绍。...层叠顺序 (Stacking Order) 层叠顺序 (层叠次序, 堆叠顺序, Stacking Order) 描述的是元素在同一个层叠上下文中的顺序规则,从层叠的底部开始,共有七种层叠顺序,如图: ?

    90950
    领券