层叠顺序
层叠顺序(stacking order),表示元素发生层叠时候有着特定的垂直显示顺序。
- z-index: -
- background
- border
- 块级
- 浮动
- 内联
- z-index: 0
- z-index: +
如果是同级元素重叠,那么后面元素盖在前面元素的身上。
层叠上下文
层叠上下文是 HTML 元素的三维概念,这些 HTML 元素在一条假想的相对于面向(电脑屏幕的)视窗或者网页的用户的 z 轴上延伸,HTML 元素依据其自身属性按照优先级顺序占用层叠上下文的空间。
某些 div
的渲染顺序是由 z-index
的值影响的。这是因为这些 div
具有使他们形成一个层叠上下文的特殊属性。
文档中的层叠上下文由满足以下任意一个条件的元素形成:
- 根元素(HTML);
z-index
值不为auto
的 绝对/相对定位 元素;- 一个
z-index
值不为auto
的flex
项目 (flex item),即:父元素display: flex/ inline-flex
; opacity
属性值小于 1 的元素;transform
属性值不为none
的元素;mix-blend-mode
属性值不为 "normal"的元素;filter
值不为none
的元素;perspective
值不为none
的元素;isolation
属性被设置为isolate
的元素;position: fixed
;-webkit-overflow-scrolling
属性被设置touch
的元素。
在层叠上下文中,其子元素同样也按照上面解释的规则进行层叠。
特别值得一提的是,其子元素的 z-index 值只在父级层叠上下文中有意义。子级层叠上下文被自动视为父级层叠上下文的一个独立单元。
总结:
- 给一个 HTML 元素定位和 z-index 赋值创建一个层叠上下文,(opacity 值不为 1 的也是相同)。
- 层叠上下文可以包含在其他层叠上下文中,并且一起创建一个有层级的层叠上下文。
- 每个层叠上下文完全独立于它的兄弟元素:当处理层叠时只考虑子元素。
- 每个层叠上下文是自包含的:当元素的内容发生层叠后,整个该元素将会 在父层叠上下文中 按顺序进行层叠。