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

Question

我不太了解堆栈上下文的规则，这里我不理解。我有一个'divider'行（'divider-line'），我想把它放在box 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背景下，有 '除法线' 孩子来它的兄弟姐妹“以前块'应该把它放在没有？ 'block'上10的z-index没有任何作用，我也尝试在'divider-line'上放置-1的z-index（无效）。

任何意见或方向将是巨大的，

Answer 1

如果没有你示例的z索引，添加背景颜色的块示出了分隔件是块的后面。

.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>