为什么 z-index 不适用于 display: flex;和负利润率？

Question

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

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

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

这是问题的简化版本：

.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

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

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

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

Answer 2

您需要使用position: relative来制作z-indexbehave 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 3

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

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

为什么 z-index 不适用于 display: flex;和负利润率？

Why does z-index not work with display: flex; and a negative margin?

html

css

margin

flexbox