I am trying to make a timeline project where i want that this line come behind by button which i made using css. I want that this line comes behind the button so that it look nice but it isn't need help
error picture - enter image description here
https://codepen.io/mohit-04/pen/abWPwPq
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="head">
<ul class="nav">
<li class="st st1 active">
<img
src="https://images.unsplash.com/photo-1593085512500-5d55148d6f0d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8Y2FydG9vbnxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=600&q=60"
alt=""
/>
<p>Minions</p>
</li>
<li class="st st2">
<img
src="https://images.unsplash.com/photo-1637858868799-7f26a0640eb6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTN8fGNhcnRvb258ZW58MHx8MHx8&auto=format&fit=crop&w=600&q=60"
alt=""
/>
<p>Happy</p>
</li>
<li class="st st3">
<img
src="https://images.unsplash.com/photo-1638803040283-7a5ffd48dad5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NDF8fGNhcnRvb258ZW58MHx8MHx8&auto=format&fit=crop&w=600&q=60"
alt=""
/>
<p>Cartoon</p>
</li>
<li class="st st4">
<img
src="https://images.unsplash.com/photo-1637855463319-9acb4e5aa44f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NDl8fGNhcnRvb258ZW58MHx8MHx8&auto=format&fit=crop&w=600&q=60"
alt=""
/>
<p>Cat</p>
</li>
<li class="st st5">
<img
src="https://images.unsplash.com/photo-1578632767115-351597cf2477?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8YW5pbWV8ZW58MHx8MHx8&auto=format&fit=crop&w=600&q=60"
alt=""
/>
<p>anime</p>
</li>
</ul>
<div class="line">
<span></span>
</div>
</div>
<div class="content">
<section class="minion-section">
<img src="" alt="" />
<h1>Minion</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate
quaerat quos eligendi distinctio velit. Id, a, amet, similique saepe
quaerat quam veniam suscipit exercitationem ut quidem odio?
Necessitatibus, velit recusandae.
</p>
</section>
<section class="happy-section">
<img src="" alt="" />
<h1>Happy</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate
quaerat quos eligendi distinctio velit. Id, a, amet, similique saepe
quaerat quam veniam suscipit exercitationem ut quidem odio?
Necessitatibus, velit recusandae.
</p>
</section>
<section class="cartoon-section">
<img src="" alt="" />
<h1>Cartoon</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate
quaerat quos eligendi distinctio velit. Id, a, amet, similique saepe
quaerat quam veniam suscipit exercitationem ut quidem odio?
Necessitatibus, velit recusandae.
</p>
</section>
<section class="cat-section">
<img src="" alt="" />
<h1>Cat</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate
quaerat quos eligendi distinctio velit. Id, a, amet, similique saepe
quaerat quam veniam suscipit exercitationem ut quidem odio?
Necessitatibus, velit recusandae.
</p>
</section>
<section class="anime-section">
<img src="" alt="" />
<h1>Anime</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate
quaerat quos eligendi distinctio velit. Id, a, amet, similique saepe
quaerat quam veniam suscipit exercitationem ut quidem odio?
Necessitatibus, velit recusandae.
</p>
</section>
</div>
</div>
</body>
</html>
style.css
@import url('https://fonts.googleapis.com/css2?family=Epilogue:wght@200&display=swap');
*{
padding: 0 ;
margin: 0;
}
body{
background-position: center;
font-family: 'Epilogue', sans-serif;
}
img{
width: 80px;
}
ul {
text-align: center;
}
ul li {
display: inline-block;
width: 200px;
text-transform: uppercase;
font-weight: 700;
transition: all .3s ease;
position: relative;
}
.container{
margin: 50px auto;
width: 80vw;
}
ul.nav li .inner{
position: absolute;
width: 100%;
font-size: 14px;
font-weight: bold;
}
ul.nav li.active,
ul.nav li:hover{
color: #444;
}
ul.nav li::after{
content: '';
display: block;
width: 7px;
height: 7px;
background: #777;
border-radius: 50%;
margin: auto;
border: 7px solid #fff;
margin-top: 40px;
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, .2);
}
ul.nav li:hover::after,
ul.nav li.active::after{
background: blue;
}
.line{
width: 76%;
margin: auto;
background: #eee;
height: 7px;
position: absolute;
left: 11.5%;
top: 41%;
z-index: 1;
border-radius: 50px;
}
You need to either apply a lower z-index number than the default on the images to the line i.e. in this case .line {z-index: -1;} or better still add a higher z-index number to the image wrapper .st class. Adding negative z-index values can have some annoying side effects.
.st {
z-index: 2;
}