层叠上下文

层叠顺序是指元素重叠时,他们显示的顺序。层叠上下文会根据层叠级数,渲染一个层叠上下文模型。

如图: 7阶层叠;

层级

  1. 形成堆叠上下文环境的元素的背景与边框。
  2. 拥有负 z-index 的子堆叠上下文元素 (负的越高越堆叠层级越低)。
  3. 正常流式布局,非 inline-block,无 position 定位(static除外)的子元素。
  4. 无 position 定位(static除外)的 float 浮动元素。
  5. 正常流式布局, inline-block元素,无 position 定位(static除外)的子元素(包括 display:table 和 display:inline )。
  6. 拥有 z-index:0 的子堆叠上下文元素。
  7. 拥有正 z-index: 的子堆叠上下文元素(正的越低越堆叠层级越低)。

注:定位元素默认z-index是auto,可以看成z-index:0。

以上可以总结为:

  • 两个同类型的元素重叠时,默认后一个比前一个层级高。
  • 在没有设置背景的情况下,元素的背景色是透明的,且允许后面的元素透上来。
  • 块级元素和其他任意除定位元素以外,文字层级比背景层级高。
  • 行内块层级大于浮动层级大于块元素的层级。
  • 后一个定位元素的层级大于前一个定位元素。
  • 定位比所有的元素层级都高。
Copyright & copy https://www.zhuyuntao.cn 2019 all right reserved,powered by Gitbook该文件修订时间: 2019-11-03 12:36:28

results matching ""

    No results matching ""