Question

我不太明白堆叠上下文的规则我不在这里理解。我有一个分隔符＆＃39;我想要放在一个方框div（＆＃39; block＆＃39;）之后的行（＆＃39;分隔线＆＃39;）。

这是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上下文，包含＆＃39;分隔线＆＃39;孩子来到它的兄弟姐妹的阻拦之前应该把它放在后面吗？ z-index为10 on＆＃39; block＆＃39;没有做任何事情，我已经尝试将z-index为-1放在＆＃39; divider-line＆＃39;同样（无济于事）。

任何建议或方向都会很棒，

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>

堆叠上下文：将一个子div放在另一个上面

1 个答案: