弹性项目和负 z-index 数

Question

我们可以在另一个元素中定义一个元素，但是使用 z-index: -1:

命令出现在其父元素后面

<div style="position:relative; width:100px; height:90px; background-color:#F00;">
  <div style="position:absolute; width:200px; height:50px; 
              background-color:#00F; z-index:-1;">
  </div>
</div>

不幸的是，这在 flex 项目中不起作用：子项不仅出现在 flex 项目后面，而且也出现在 flex 容器后面。如何解决？

Answer 1

元素 可以直接放在它的 parent div 后面，即使 parent 是 flex-item。虽然我们必须照顾三名球员：

弹性容器：必须有一个position（当然不是静态的）和一个z-index.
弹性项目： 应该有 position，但 不能有 z-index.
后面的child：必须有一个position和z-index:-1

Try it in this JSFiddle

我们甚至可以微调 child 后面的外观：

Child 应 直接出现在弹性项目后面，但在弹性容器上方 ：将任何 z-index 应用到弹性容器，但 none 到 flex 项目。
Child应该出现在弹性组后面（在弹性项目后面和在弹性容器后面）：不要将 z-index 应用于 flex 容器或 flex 项目。

更新： 正如讨论中的结果（如果有兴趣，请参阅问题评论），这种 行为和解决方案不仅限于 flex.然而，它会特别发生在那里，因为 flexbox 本身是一个 2 层结构（flex container > flex item > child behind）。

弹性项目和负 z-index 数

flex items and negative z-index numbers

html

css

z-index

flexbox