I am trying to make the frame of the breadcrump to overlap the inside images. I tried z-index -1 but it lets the images disapear. check the image attached to understand more. thanks
.breadcrumb {
margin-bottom: 25px;
margin-top: 0px;
list-style: none;
padding: 0;
display: flex;
justify-content: center;
font-weight: bold !important;
text-align: center !important;
background-color: #ffffff;
}
.breadcrumb li {
width: 181px;
height: 140px;
text-align: center !important;
color: white !important;
text-decoration: none;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
margin-left: -30px;
}
.breadcrumb li:nth-child(1),.breadcrumb li:nth-child(2),.breadcrumb li:nth-child(3),.breadcrumb li:nth-child(4),.breadcrumb li:nth-child(5),.breadcrumb li:nth-child(6),.breadcrumb li:nth-child(7),.breadcrumb li:nth-child(8),.breadcrumb li:nth-child(9) {
background: url(asset-path("light_gray.png")) no-repeat right !important;
background-size: cover !important;
z-index: 1;
}
.breadcrumb a, .breadcrumb a:link,.breadcrumb a:visited {
color: white;
margin: 10px 0px 115px 30px;
font-size: 13px;
white-space: nowrap;
}
.breadcrumb li img {
width: 131px;
position: absolute;
left: 19%;
top: 22%;
height: 100%;
clip-path: polygon(0% 0%, 0% 0%, 81% 0%, 108% 26%, 40% 100%, 0% 81%, 0% 0%, 0% 0%);
}
col-md-12{
border: 2px solid black;
padding: 10px;
margin: -10px;
}
strong{
text-transform: uppercase;
}
.doctor{
padding: 0px;
}
.patient{
padding: 0px
}
.breadcrumb > li + li:before {
content: " " !important;
}
.border{
width: 100%
}
li .shadow, li .blue, li .orange, li .gray, li .green {
color: white !important;
}
}
.left{
border-left-color: #fe4e2d !important;
} <ul class="breadcrumb">
<li> <a class=" " href="/steptations?case_id=400&doctor_id=19&product_id=4&step_id=1">Conception</a>
<a href="/steptations?case_id=400&doctor_id=19&product_id=4&step_id=1"><img title="" src="//mobileimplantlab.s3.amazonaws.com/step_images/image1s/000/002/739/original/5EDAD5D1-E621-4DAF-BB33-C17554246FDA.jpeg?1679639265" alt="5edad5d1 e621 4daf bb33 c17554246fda">
</a> </li><li> <a class=" " href="/steptations?case_id=400&doctor_id=19&product_id=4&step_id=2">Jig/BB/CT</a>
</li><li> <a class=" " href="/steptations?case_id=400&doctor_id=19&product_id=4&step_id=3">Pour/Mount</a>
<a href="/steptations?case_id=400&doctor_id=19&product_id=4&step_id=3"><img title="" src="//mobileimplantlab.s3.amazonaws.com/step_images/image1s/000/002/783/original/image.jpg?1681598393" alt="Image">
</a> </li><li> <a class=" " href="/steptations?case_id=400&doctor_id=19&product_id=4&step_id=4">Teeth set up</a>
<a href="/steptations?case_id=400&doctor_id=19&product_id=4&step_id=4"><img title="" src="//mobileimplantlab.s3.amazonaws.com/step_images/image1s/000/002/784/original/image.jpg?1681598836" alt="Image">
</a> </li><li> <a class=" " href="/steptations?case_id=400&doctor_id=19&product_id=4&step_id=10">Bar milling</a>
<a href="/steptations?case_id=400&doctor_id=19&product_id=4&step_id=10"><img title="" src="//mobileimplantlab.s3.amazonaws.com/step_images/image1s/000/002/781/original/image.jpg?1681512121" alt="Image">
</a> </li><li> <a class=" " href="/steptations?case_id=400&doctor_id=19&product_id=4&step_id=11">Finalization</a>
<a href="/steptations?case_id=400&doctor_id=19&product_id=4&step_id=11"><img title="" src="//mobileimplantlab.s3.amazonaws.com/step_images/image1s/000/002/816/original/CB1E55D8-9D9E-42F3-96EA-3C4486D9FCEF.jpeg?1682993428" alt="Cb1e55d8 9d9e 42f3 96ea 3c4486d9fcef">
</a> </li><li style="background: url(/assets/gray.png) no-repeat right !important; background-size: cover !important;"> <a class="gray " href="/steptations?case_id=400&doctor_id=19&product_id=4&step_id=13">Shipped </a>
<a href="/steptations?case_id=400&doctor_id=19&product_id=4&step_id=13"><img title="" src="//mobileimplantlab.s3.amazonaws.com/step_images/image1s/000/002/817/original/455D15CB-9C78-40B7-A3D6-9E710565CCC4.jpeg?1682993522" alt="455d15cb 9c78 40b7 a3d6 9e710565ccc4">
</a> </li></ul>
>Solution :
Using z-index: -1; will hide it because the image "disappears" behind the element. You need to give all the list <li> elements a z-index that decreases the more elements there are. So you would go from element1 = z-index: 10;, element2 = z-index: 9; and so on.
This could be solved with javascript, so that you don’t have to do this manually:
.breadcrumb li:nth-child(1){ z-index: 10 !important; }
.breadcrumb li:nth-child(2){ z-index: 9 !important; }
.breadcrumb li:nth-child(3){ z-index: 8 !important; }
.breadcrumb li:nth-child(4){ z-index: 7 !important; }
.breadcrumb li:nth-child(5){ z-index: 6 !important; }
.breadcrumb li:nth-child(6){ z-index: 5 !important; }
.breadcrumb li:nth-child(5){ z-index: 4 !important; }
Here is a javascript snippet that should do that for you automatically:
// Get all the .breadcrumb elements
const breadcrumbs = document.querySelectorAll('.breadcrumb li');
// Loop through the breadcrumbs and set the z-index
breadcrumbs.forEach((item, index) => {
// Calculate the z-index value by subtracting the index from the total number of crumbs
const z = breadcrumbs.length - index;
// Set the z-index value using inline style
item.style.zIndex = z;
});