为什么 z-index 不适用于 display: flex;和负边距？ [复制]

Question

我正在尝试在横幅图像上覆盖一些面包屑。我没有使用绝对定位或类似的解决方案，而是使用负边距。

由于某种原因，横幅文本的边缘覆盖了面包屑，这意味着它们无法被点击或选择。

我的假设是这是一个简单的 z-index 问题，但我无法让 z-index 工作。无论我把它放在哪里或我将它设置为什么值，问题都仍然存在。据我所知，它只发生在display: flex。

这是问题的简化版本：

https://codepen.io/anon/pen/jgMGYj

.small-text
{
  margin-bottom: -20px;
}

.small-text span
{
    background-color: orange;
}

.big-container
{
    display: flex;
    align-items: center;
    background-color: purple;
}

.big-text
{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.big-text span
{
  margin-top: 50px;
  background-color: lime;
}

<div class="small-text">
  <span>I want to select/highlight this.</span>
</div>
<div class="big-container">
  <div class="big-text">
    <span>But this element's margin is covering it up.</span>
  </div>
</div>

这是什么原因？是否有一些我不理解的 z-index 规则？它是一个弹性错误吗？是否可以在不删除display: flex的情况下修复它？

Answer 1

您需要使用position: relative 来制作z-index behave like you want it to。

.small-text {
  margin-bottom: -20px;
  position: relative;
  z-index: 1;
}

.small-text span {
  background-color: orange;
}

.big-container {
  display: flex;
  align-items: center;
  background-color: purple;
}

.big-text {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.big-text span {
  margin-top: 50px;
  background-color: lime;
}

<div class="small-text">
  <span>I want to select/highlight this.</span>
</div>
<div class="big-container">
  <div class="big-text">
    <span>But this element's margin is covering it up.</span>
  </div>
</div>

Answer 2

试试下面的代码： 每次都使用带有 z-index 的位置。

.small-text {
  margin-bottom: -20px;
  position: relative;
  z-index: 1;
}

Answer 3

.small-text
{
  margin-bottom: 0;
}

.big-text span
{
  margin-top: 30px;
  background-color: lime;
}

我想我明白你在问什么，如果你从小文本中删除 -20px 边距并将 margin-top 减少到 30px，你会得到相同的定位，你可以选择橙色文本。