堆叠上下文：将一个 child div 放在另一个之上

Question

我不是很明白堆叠上下文的规则我在这里不明白。我有一条 'divider' 行 ('divider-line')，我想将其放在框 div ('block') 后面。

这是HTML：

<div class="report-title">
  <div class="divider-line"></div>
  <div class="block">
    <div class="icon">0</div>
    <h1 class="text">FOO BAR</h1>
  </div>
</div>

这里是 CSS（w/scss 嵌套）：

.report-title {
  display: flex;
  align-items: center;
  flex-direction: column;
  position: relative;
  width: 100%;
  margin: 100px 0;

  .block {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: -100px;
    z-index: 10;
    height: 200px;
    width: 475px;
    .icon {
      font-size: 9rem;
    }
    .text {
      display: block;
    }
  }

  .divider-line {
    width: 100%;
    height: 1px;
    background-color: gray;
  }
}

HTML 上下文，让 'divider-line' child 出现在它的兄弟 'block' 之前应该把它放在后面不是吗？ 'block' 上的 10 的 z-index 没有做任何事情，我也尝试将 -1 的 z-index 放在 'divider-line' 上（无济于事）。

任何建议或指导都会很棒，

Answer 1

在您的示例中没有 z-index，向块添加背景颜色表明分隔线在块后面。

.report-title {
  display: flex;
  align-items: center;
  flex-direction: column;
  position: relative;
  width: 100%;
  margin: 100px 0;
}

.block {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  background-color: #FFF;
  top: -100px;
  height: 200px;
  width: 475px;
}

.icon {
  font-size: 9rem;
}

.text {
  display: block;
}
 
.divider-line {
    width: 100%;
    height: 1px;
    background-color: gray;
}

<div class="report-title">
  <div class="divider-line"></div>
  <div class="block">
    <div class="icon">0</div>
    <h1 class="text">FOO BAR</h1>
  </div>
</div>

堆叠上下文：将一个 child div 放在另一个之上

Stacking Context: Putting one child div above another

html

css

z-index

flexbox