层叠顺序（stacking level）与堆栈上下文（stacking context）

最新推荐文章于 2024-08-05 11:06:48 发布

转载最新推荐文章于 2024-08-05 11:06:48 发布 · 566 阅读

文章标签：

6 篇文章

订阅专栏

本文详细介绍了CSS中堆叠上下文的构成及其内部元素的堆叠顺序，包括负z-index元素、正常流布局元素、浮动元素、inline-block元素及正z-index元素等。

形成堆叠上下文环境的元素的背景与边框
拥有负 z-index 的子堆叠上下文元素（负的越高越堆叠层级越低）
正常流式布局，非 inline-block，无 position 定位（static除外）的子元素
无 position 定位（static除外）的 float 浮动元素
正常流式布局， inline-block元素，无 position 定位（static除外）的子元素（包括 display:table 和 display:inline ）
拥有 z-index:0 的子堆叠上下文元素
拥有正 z-index: 的子堆叠上下文元素（正的越低越堆叠层级越低）