首页 > 代码库 > 层叠水平(stacking level)

层叠水平(stacking level)

 

技术分享

 

运用上图的逻辑,上面的题目就迎刃而解,inline-blcok 的 stacking level 比之 float 要高,所以无论 DOM 的先后顺序都堆叠在上面。

 

不过上面图示的说法有一些不准确,按照 W3官方 的说法,准确的 7 层为:

 

  1. the background and borders of the element forming the stacking context.

  2. the child stacking contexts with negative stack levels (most negative first).

  3. the in-flow, non-inline-level, non-positioned descendants.

  4. the non-positioned floats.

  5. the in-flow, inline-level, non-positioned descendants, including inline tables and inline blocks.

  6. the child stacking contexts with stack level 0 and the positioned descendants with stack level 0.

  7. the child stacking contexts with positive stack levels (least positive first).

 

稍微翻译一下:

 

  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: 的子堆叠上下文元素(正的越低越堆叠层级越低)

 

层叠水平(stacking level)