Why my line is coming forward i need this to go behind-CodePudding

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 >
      <div >
        <ul >
          <li >
            <img
              src="https://images.unsplash.com/photo-1593085512500-5d55148d6f0d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8Y2FydG9vbnxlbnwwfHwwfHw=&auto=format&fit=crop&w=600&q=60"
              alt=""
            />
            <p>Minions</p>
          </li>
          <li >
            <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 >
            <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 >
            <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 >
            <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 >
          <span></span>
        </div>
      </div>
      <div >
        <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 >
            <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 >
            <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 >
            <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 >
            <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;
}

CodePudding user response：

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;
}