how to apply z-index for 3 div's

Question

I have three div's on parent div i added one line using : before pseudo-class, my question is I want to hide that line on blue color div and the line should come above red color div.i tried using z-index but not getting. Can anyone suggest me where I have to add z-index ? below is my code

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

Answer 1

Just remove "z-index" values on everything but add it only on ".timeline--icon"

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