我在父div上有三个div我使用: before伪类添加了一行，
我的问题是我想在蓝色div上隐藏该行，并且该行应该在红色div.i上面尝试使用z-index但是没有得到。
任何人都可以建议我在哪里添加z-index？
下面是我的代码
.timeline-row {
position: relative;
display: flex;
padding: 100px 0 0;
}
.timeline--seperator {
background: red;
position: relative;
z-index: -1;
}
.timeline--icon {
position: relative;
background: blue;
margin-left: 14px;
width: 130px;
height: 130px;
box-shadow: 0 5px 15px 0 rgba(112, 128, 175, 0.09);
}
.is-circle {
border-radius: 50%;
}
.is-square {
border-radius: 0;
}
.timeline--seperator i {
position: absolute;
top: 50%;
left: 50%;
color: #5e5e5e;
}
.timeline--content h2 {
font-size: 20px;
font-weight: bold;
color: #5e5e5e;
}
.timeline--content h3 {
padding: 8px 0 15px;
font-size: 20px;
font-weight: 600;
color: #8dd8ea;
}
.timeline--content p {
font-size: medium;
line-height: 1.3;
color: #5f5f5f;
}
.timeline-wrap {
position: relative;
width: 100%;
max-width: 1440px;
margin: 0 auto;
padding: 0 0 80px;
}
.timeline-row .timeline--content {
width: 45%;
}
.timeline-row:nth-child(even) .timeline--seperator .timeline--icon { float: left; }
.timeline-row:nth-child(odd) .timeline--seperator .timeline--icon { float: right; }
.timeline-row:nth-child(even) > .timeline--seperator {
order: 2;
}
.timeline-row:nth-child(even) > .timeline--content {
text-align: right;
}
.timeline-row:nth-child(odd) > .timeline--content {
order: 1;
text-align: left;
}
.timeline-wrap:after {
content: "";
position: absolute;
top: 10%;
left: 50%;
width: 4px;
height: 80%;
z-index: -1;
background-color: #000000;
}
.is-end {
justify-content: flex-end;
}
.is-start {
justify-content: flex-start;
}<div class="timeline-wrap">
<div class="timeline-row is-end">
<div class="timeline--seperator">
<div class="timeline--icon is-circle">
<i class="fa fa-circle-thin fa-4x"></i>
</div>
</div>
<div class="timeline--content">
<h2>RESEARCH & ANALYTICS</h2>
<h3>DISCOVER</h3>
<p> Lorem Ipsum has been the industry's unknown printer, remaining essenum has been the industry's unknown printer, remaining essentially unchangedum has been the industry's unknown printer, remaining essentially unchangedum has been the industry's unknown printer, remaining essentially unchangedum has been the industry's unknown printer, remaining essentially unchangedum has been the industry's unknown printer, remaining essentially unchangedum has been the industry's unknown printer, remaining essentially unchangedum has been the industry's unknown printer, remaining essentially unchangedtially unchanged a galley of type and scrambled it to make a type specimen book.</p>
</div>
</div>
<div class="timeline-row is-start">
<div class="timeline--seperator">
<div class="timeline--icon is-circle">
<i class="fa fa-lightbulb-o fa-4x"></i>
</div>
</div>
<div class="timeline--content">
<h2>TACTICAL PLAN</h2>
<h3>IDEATION</h3>
<p> Lorem Ipsum has been the industry's unknown printer, remaining essentially unchanged a galley of type and scrambled it to make a type specimen book.</p>
</div>
</div>
</div>
答案 0 :(得分：4)
只需删除＆＃34; z-index＆＃34;所有内容的值，但仅在＆＃34; .timeline - icon＆＃34;
上添加
.timeline-row {
position: relative;
display: flex;
padding: 100px 0 0;
}
.timeline--seperator {
background: red;
position: relative;
}
.timeline--icon {
position: relative;
background: blue;
margin-left: 14px;
width: 130px;
height: 130px;
box-shadow: 0 5px 15px 0 rgba(112, 128, 175, 0.09);
z-index: 1;
}
.is-circle {
border-radius: 50%;
}
.is-square {
border-radius: 0;
}
.timeline--seperator i {
position: absolute;
top: 50%;
left: 50%;
color: #5e5e5e;
}
.timeline--content h2 {
font-size: 20px;
font-weight: bold;
color: #5e5e5e;
}
.timeline--content h3 {
padding: 8px 0 15px;
font-size: 20px;
font-weight: 600;
color: #8dd8ea;
}
.timeline--content p {
font-size: medium;
line-height: 1.3;
color: #5f5f5f;
}
.timeline-wrap {
position: relative;
width: 100%;
max-width: 1440px;
margin: 0 auto;
padding: 0 0 80px;
}
.timeline-row .timeline--content {
width: 45%;
}
.timeline-row:nth-child(even) .timeline--seperator .timeline--icon { float: left; }
.timeline-row:nth-child(odd) .timeline--seperator .timeline--icon { float: right; }
.timeline-row:nth-child(even) > .timeline--seperator {
order: 2;
}
.timeline-row:nth-child(even) > .timeline--content {
text-align: right;
}
.timeline-row:nth-child(odd) > .timeline--content {
order: 1;
text-align: left;
}
.timeline-wrap:after {
content: "";
position: absolute;
top: 10%;
left: 50%;
width: 4px;
height: 80%;
background-color: #000000;
}
.is-end {
justify-content: flex-end;
}
.is-start {
justify-content: flex-start;
}<div class="timeline-wrap">
<div class="timeline-row is-end">
<div class="timeline--seperator">
<div class="timeline--icon is-circle">
<i class="fa fa-circle-thin fa-4x"></i>
</div>
</div>
<div class="timeline--content">
<h2>RESEARCH & ANALYTICS</h2>
<h3>DISCOVER</h3>
<p> Lorem Ipsum has been the industry's unknown printer, remaining essenum has been the industry's unknown printer, remaining essentially unchangedum has been the industry's unknown printer, remaining essentially unchangedum has been the industry's unknown printer, remaining essentially unchangedum has been the industry's unknown printer, remaining essentially unchangedum has been the industry's unknown printer, remaining essentially unchangedum has been the industry's unknown printer, remaining essentially unchangedum has been the industry's unknown printer, remaining essentially unchangedtially unchanged a galley of type and scrambled it to make a type specimen book.</p>
</div>
</div>
<div class="timeline-row is-start">
<div class="timeline--seperator">
<div class="timeline--icon is-circle">
<i class="fa fa-lightbulb-o fa-4x"></i>
</div>
</div>
<div class="timeline--content">
<h2>TACTICAL PLAN</h2>
<h3>IDEATION</h3>
<p> Lorem Ipsum has been the industry's unknown printer, remaining essentially unchanged a galley of type and scrambled it to make a type specimen book.</p>
</div>
</div>
</div>