堆叠上下文z-index

堆叠上下文(stack context)

它是一块区域,这个区域由每个元素创建,规定了在区域中的内容在Z轴上的先后顺序;

创建堆叠上下文

  • 根元素(html元素)
  • 设置了Z-index 且为数值,非auto的定位元素

同一堆叠上下文中元素在Z轴的排列

从后到前的顺序

  1. 创建堆叠上下文的元素的背景和边框
  2. 堆叠级别为负值的堆叠上下文
  3. 常规流非定位块盒
  4. 非定位浮动盒子
  5. 常规流非定位行盒
  6. 任何z-index是auto的定位子元素,以及z-index为0 的堆叠上下文
  7. 堆叠上下文为正数

 

posted @ 2020-03-15 19:38  古月大叔  阅读(120)  评论(0编辑  收藏  举报