-
层(堆)叠顺序
由上图可知,在仅存在html这一个根元素层叠上下文的情况下,页面上的堆叠顺序为(序号越大,层级越高):
(0) z-index < 0
(1) background
(2) border
(3) div(块级)
(4) float
(5) inline/inline-block(包括text)
(6) position: absolute/relative
(7)z-index > 0&&z-index !== auto -
层(堆)叠上下文
可以构成层叠上下文的情况,以下仅列出最常见的4种情况:
(1) 根元素 (HTML)
(2) position:absolute/relative &&z-index !== auto
(3) position: fixed
(4) opacity < 1
…
产生层叠上下文之后主要产生的影响:
(1) 对产生层叠上下文的元素本身来说,z-index < 0的层级顺序会由background之后调到border之后块级之前
(2) 对层叠上下文中的元素来说,产生层叠上下文的(父级)z-index越高,整个层叠块的层级就越高。因此会产生页面中z-index < 0的元素在z-index > 0元素的上层,就是因为z-index < 0处在z-index较高的层叠上下文中。
以上。