一般z-index失效基本上都是不了解z-index是如何工作导致的(这没有看这篇blog之前,至少我也是这样的)。它不复杂,但如果不花时间去查看z-index文档,可能会不了解一些关键技术点。
不信?能否解答如下问题,作为检验你是否真正了解z-index:
问题:
HTML结构如下:
|
|
CSS如下:
|
|
如何将“红色块”放置“绿色块”之后,需要满足如下条件:
- 不能修改html结构
- 不能修改任何元素的z-index属性
- 不能修改任何元素的position属性
codepen:
解决方法
给第一个div
(即“红色块”的父节点)添加如下样式:
|
|
或许你会好奇为什么这个opacity
会让“红色块”置于“绿色块”之后(当时我看这个答案也是一脸懵逼了😑)。希望下文能解惑你的好奇。
z-index specification
z-index只对positioned元素(即该元素的position
不等于默认static
外的值)起作用。对应positoned box
(positioned元素),z-index主要:
- 指定该元素在当前stacking context的stack层级
- 该元素是否创建新的stacking context
z-index可以取如下值:
(integer)整数:表示当前元素在当前的stacking context的stack层级,并会让当前元素创建一个新的stacking context
auto: 表示当前元素在当前的stacking context的stack层级为0,如果该元素不是root元素,就不会创建新的stacking context
stacking order
stacking context可以相互嵌套,每个元素(box)都属于一个stacking context(自包含),每个positoned box
在一个stacking context中都有一个整数的stack层级,它表示在同一个stacking context中的z轴方向stack层级位置。stack层级越大在stacking context中的位置越靠前。如果stack层级相同,按其在DOM文档中出现顺序绘制。
stacking context
The stacking context is a three-dimensional conceptualization of HTML elements along an imaginary z-axis relative to the user who is assumed to be facing the viewport or the webpage. HTML elements occupy this space in priority order based on element attributes.——MDN
stacking context的形成条件:
- 文档根节点(HTML)| Root element of document (HTML).
- 元素的position属性值为
absolute
或relative
,并且z-index属性为除auto
外的值 | Element with a position value “absolute” or “relative” and z-index value other than “auto”. - 元素的position属性值为
fixed
或sticky
| Element with a position value “fixed” or “sticky” (sticky for all mobile browsers, but not older desktop). - 元素是flexbox容器的子元素,带有z-index属性,且值为除
auto
外的值 | Element that is a child of a flex (flexbox) container, with z-index value other than “auto”. - 元素的opcity属性值小于1 | Element with a opacity value less than 1 (See the specification for opacity).
- 元素的mix-blend-mode属性值为除
normal
外的值 | Element with a mix-blend-mode value other than “normal”. - 元素的如下属性值为除
none
外的值 | Element with any of the following properties with value other than “none”: - 元素的isolation属性值为
isolate
| Element with a isolation value “isolate”. - 元素的-webkit-overflow-scrolling属性值为
touch
| Element with a -webkit-overflow-scrolling value “touch”. - 元素带有will-change属性 | Element with a will-change value specifying any property that would create a stacking context on non-initial value (see this post).
painted order in stacking context
- 形成stacking context元素的
background
和borders
| the background and borders of the element forming the stacking context. - 负数的stack层级的child stacking context(负数值越大越前) | the child stacking contexts with negative stack levels (most negative first).
- 文档流中非inline级、非positioned子节点 | the in-flow, non-inline-level, non-positioned descendants.
- 非positioned浮动子节点 | the non-positioned floats.
- 文档流中非positioned的inline级子节点(包括inline tables和inline blocks) | the in-flow, inline-level, non-positioned descendants, including inline tables and inline blocks.
- stack层级为0的child stacking context和positoned子节点 | the child stacking contexts with stack level 0 and the positioned descendants with stack level 0.
- stack层级为正整数的child stacking context | the child stacking contexts with positive stack levels (least positive first).
Example
参考文章:
- What No One Told You About Z-Index
- The stacking context
- Specifying the stack level: the ‘z-index’ property
声明:本资料仅供学习交流,严禁使用于任何商业用途! 如需转载,转载请注明出处。