为什么我的台词在前面，我需要这个在后面

Question

我正在尝试制作一个时间轴项目，我希望这条线通过我使用 css 制作的按钮出现在后面。我希望这条线位于按钮后面，这样看起来不错，但不需要帮助

错误图片- enter image description here

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

Answer 1

您需要将比图像上的默认值更低的 z-index 数字应用到该行，即在这种情况下 .line {z-index: -1;} 或者更好的是仍然添加更高的 z-index 数字到图像包装 .st class。添加负 z-index 值可能会产生一些恼人的副作用。

.st {
  z-index: 2;
}

为什么我的台词在前面，我需要这个在后面

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

html

css

styles

cascading