CSS中的Z-index在我的主菜单中不起作用

编程问答 2022-06-06

问题描述

css中的“ z-index”属性有问题。

  <div class="mobil__navigation">
        <div class="toggle" id="toggle">
            <div class="toggle-line"></div>
            <div class="toggle-line"></div>
            <div class="toggle-line"></div>
          </div>
          <img src="ressources/images/logo.png"/>
        </div>
        <nav class="mobil__links">
          <ol>
            <li class="mt-0"><a href="#">Mülltrennung</a><span class="mobil_menue_arrow"><img src="ressources/images/arrows.svg"></span></li>
            <li><a href="#">Umweltbewusstsein</a><span class="mobil_menue_arrow"><img src="ressources/images/arrows.svg"></span></li>
            <li><a href="#">Nachhaltigkeit</a><span class="mobil_menue_arrow"><img src="ressources/images/arrows.svg"></span></li>
            <li><a href="#">Teste dein Wissen</a><span class="mobil_menue_arrow"><img src="ressources/images/arrows.svg"></span></li>
          </ol>
        </nav>

        <div class="main__description">
          <div class="headline">
            <h1>Was ist Müll eigentlich?</h1>
            <div class="headline_line"></div>
          </div>
          </h1>
          <p>Abfall ist für uns all das,was wir nicht mehr gebrauchen können. Allerdings ist die<br/>
            Entscheidung,was noch brauchbar ist oder was schon unbrauchbar,also Müll ist,<br/>
            von jedem selbst abhängig und oft individuell sehr unterschiedlich.<br/>
            Grundsätzlich versteht man unter Abfall bzw. Müll  die <b>Reste</b>,die bei der <b>Zubereitung oder Herstellung</b><br/>
            von etwas entstehen.</p>
        </div>

和我的CSS：

    display: none;
    width:50%;
    -webkit-Box-shadow: 0px 9px 21px -8px rgba(0,0.46);
    -moz-Box-shadow: 0px 9px 21px -8px rgba(0,0.46);
    Box-shadow: 0px 9px 21px -8px rgba(0,0.46);
    padding-top: 35px;
    padding-bottom: 35px;
    position:relative;
    z-index:2;
  }
  .main__description {
      margin-top:0;
      position: relative;
      top:160px;
      left:50%;
      transform: translateX(-50%);
      z-index:-1;
  }

有人知道吗，我的名为“ mobil__links”的类不在“ main__description”类的上方？

我期待着与您的交往； =）

解决方法

主要问题似乎是，尽管菜单的z-index为2，文本的z-index为-1，但是它们都相对放置。

因此，让我们将main保持在position：relative，然后放置菜单。它的z索引已经比main大，因此如果我们不干扰它的位置，它应该显示在它的顶部。我们将其位置设置为绝对。这意味着它将被放置在自然流中（在本例中是顶部，因为上面没有任何东西），但是它不会影响后面的任何元素的位置，因此正文可以藏在下面。

注意：对于菜单，当用户正在滚动等时，您可能需要考虑位置：固定，以便其在向下滚动时不会消失-这取决于您的特定用例。

在此代码段中，我还做了一些其他更改-请参见注释-并对齐了元素，以便我们可以更清楚地看到层次结构。

 .mobil__links {
    rdisplay: none;/* taken out just for the test */
    width:50%;
    -webkit-box-shadow: 0px 9px 21px -8px rgba(0,0.46);
    -moz-box-shadow: 0px 9px 21px -8px rgba(0,0.46);
    box-shadow: 0px 9px 21px -8px rgba(0,0.46);
    padding-top: 35px;
    padding-bottom: 35px;
    position:relative;
    position:absolute;
    z-index:2;
  }
  .main__description {
      margin-top:0;
      position: relative;
      top:160px;
      left:50%;
      transform: translateX(-50%);
      z-index:-1;
  }
  <div class="mobil__navigation">
    <div class="toggle" id="toggle">
      <div class="toggle-line"></div>
         <div class="toggle-line"></div>
            <div class="toggle-line"></div>
      </div>
      <img src="ressources/images/Logo.png"/>
   </div>
   <nav class="mobil__links">
      <ol>
        <li class="mt-0"><a href="#">Mülltrennung</a><span class="mobil_menue_arrow"><img src="ressources/images/arrows.svg"></span></li>
        <li><a href="#">Umweltbewusstsein</a><span class="mobil_menue_arrow"><img src="ressources/images/arrows.svg"></span></li>
        <li><a href="#">Nachhaltigkeit</a><span class="mobil_menue_arrow"><img src="ressources/images/arrows.svg"></span></li>
        <li><a href="#">Teste dein Wissen</a><span class="mobil_menue_arrow"><img src="ressources/images/arrows.svg"></span></li>
      </ol>
   </nav>

   <div class="main__description">
     <div class="headline">
       <h1>Was ist Müll eigentlich?</h1>
         <div class="headline_line"></div>
     </div>
          <!-- spurious h1 </h1> -->
     <p>Abfall ist für uns all das,was wir nicht mehr gebrauchen können. Allerdings ist die<br/>
            Entscheidung,was noch brauchbar ist oder was schon unbrauchbar,also Müll ist,<br/>
            von jedem selbst abhängig und oft individuell sehr unterschiedlich.<br/>
            Grundsätzlich versteht man unter Abfall bzw. Müll  die <b>Reste</b>,die bei der <b>Zubereitung oder Herstellung</b><br/>
            von etwas entstehen.
      </p>
    </div>

,

您在两行上命令.mobil__links应该具有display:none;。 因此，它显然没有首先出现，但我认为那是您的意图。但是对于这个示例，我已经将其注释掉了。

.mobil__links具有position:relative;属性。 desktop__navigation也具有该属性，这意味着它将.mobil__links推开。因此：将position:absolute;添加到.mobil__links将解决此问题。

现在，您仍然需要定义位置（顶部，左侧）。将其添加到.mobile__links可以使其位置正确。我添加了top:0px;和left:0px;使其显示在屏幕的左上角。

body {
  margin: 0;
}
/*.mobil__links {
  display: none;
}*/
.social {
  width:calc(100% - 138px);
  display:flex;
  padding-top: 15px;
  padding-bottom: 15px;
  padding-right:138px;
  justify-content: flex-end;
  background-color: #C2C38E;
}
.social ol {
  display:flex;
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.social ol li {
  padding-right: 5px;
  border-right: 1px solid white;
}
.social ol li:last-child {
  padding-right: 0px;
  border-right: 0px solid black;
  margin-left: 5px;
}
.social ol li a {
  text-decoration: none;
  color:White;
  font-size: 20px;
  text-transform: uppercase;
  font-family: Roboto;
}
.desktop__navigation {
  width:100%;
  padding-top: 40px;
  padding-bottom: 47px;
  -webkit-box-shadow: 0px 6px 5px 1px rgba(0,0.63);
  -moz-box-shadow: 0px 6px 5px 1px rgba(0,0.63);
  box-shadow: 0px 6px 5px 1px rgba(0,0.63);
}
.desktop__navigation ol {
  padding-right: 138px;
  padding-left: 138px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin:0;
  list-style-type: none;
}
.desktop__navigation ol li a {
  color:black;
  font-family: Roboto;
  font-size: 25px;
  text-decoration: none;
  text-transform: uppercase;
}
.desktop__navigation ol li a img {
  height:150px;
  width:180px;
}
.mobil__navigation {
  display: none;
}
.toggle {
  display: none;
}
.mobil_menue_arrow {
  display: none;
}
.main__description {
  margin:0 auto;
  width:60%;
  text-align: center;
  margin-top:160px;
}
.headline {
  position: relative;
  width:400px;
  margin:0 auto;
}
.headline_line {
  position: absolute;
  bottom:-10px;
  left:5%;
  height:30px;
  background-image: url("../ressources/images/unterstrich.png");
  background-repeat: no-repeat;
  width: 63%;
  z-index: 1;
}
.main__description h1 {
  position: relative;
  z-index:2;
  font-family:A little sunshine;
  font-size: 50px;
}
.main__description p {
  font-family:Roboto;
  font-size: 20px
}
@media (max-width:1400px) {
  /*Helpingclasses*/
  .d-block {
    display: block !important;
  }
  .mt-0 {
    margin-top: 0 !important;
  }
  .desktop__navigation {
    display: none;
  }
  .toggle {
    display: block;
    margin-left:20px;
    position: absolute;
  }
  .toggle-line {
    margin-top:10px;
    height:5px;
    background-color: #C2C38E;
    width:40px;
  }
  .social {
    padding: 0;
    padding-top: 10px;
    padding-bottom: 10px;
    display: flex;
    justify-content: flex-end;
    width:100%;
    padding-right: 50px;
    box-sizing: border-box;
  }
  .social ol li a {
    text-transform: uppercase;
    font-family: Roboto;
    font-size: 11px;
  }
  .mobil__links {
    /*display: none;*/
    position:absolute;
    top:0px;
    left:0px;
    width:50%;
    -webkit-box-shadow: 0px 9px 21px -8px rgba(0,0.46);
    padding-top: 35px;
    padding-bottom: 35px;
    z-index:2;
    background-color:white;
  }
  .mobil__links ol {
    width:100%;
    margin: 0 auto;
    padding: 0;
    list-style-type: none;
    display:flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .mobil__links li {
    display: flex;
    margin-top: 30px;
  }
  .mobil__links li span {
    display: flex;
    align-items: center;
    position: absolute;
    right:30px;
  }
  .mobil__links ol li a {
    text-transform: uppercase;
    font-size: 15px;
    color: black;
    text-decoration: none;
    display: block;
    font-family: Roboto;
    padding-left: 15px;
  }
  .mobil__links ol li a img {
    height:100px;
  }
  .mobil__navigation {
    display:flex;
    padding-top: 13px;
    padding-bottom: 13px;
    -webkit-box-shadow: 3px 6px 25px -3px rgba(0,0.57);
    -moz-box-shadow: 3px 6px 25px -3px rgba(0,0.57);
     box-shadow: 3px 6px 25px -3px rgba(0,0.57);
  }
  .mobil__navigation img {
    width: 56px;
    height:46px;
    display:block;
    margin:0 auto;
  }
  .mobil_menue_arrow img{
    display: block;
    height:12px;
    width:17px;
  }
  .main__description {
      margin-top:0;
      position: relative;
      top:160px;
      left:50%;
      transform: translateX(-50%);
      z-index:-1;
  }
  .main__description h1 {
      font-size: 23px;
  }
  .headline {
    width:171.5px;
  }
  .main__description p{
    font-size: 13px;
    font-family: Roboto;
  }
  .headline_line {
    position: absolute;
    bottom:5px;
    left:0%;
    height:30px;
    background-image: url("../ressources/images/unterstrich.png");
    background-repeat: no-repeat;
    width: 30%;
    height:5px;
    z-index: 1;
  }
}
<!DOCTYPE html>

<html>
    <head>
      <title>Unsere Seite</title>
      <meta charset="utf-8" />
      <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
      <link rel="stylesheet" href="style/style.css"/>
    </head>

    <body>
      <div class="social">
        <ol>
            <li><a href="instagram.com">Instagram</a></li>
            <li><a href="instagram.com">Facebook</a></li>
        </ol>
      </div>
        <nav class="desktop__navigation">
          <ol>
            <li><a href="#">Mülltrennung</a></li>
            <li><a href="#">Umweltbewusstsein</a></li>
            <li><a href="#"><img src="ressources/images/Logo.png"/></a></li>
            <li><a href="#">Nachhaltigkeit</a></li>
            <li><a href="#">Teste dein Wissen</a></li>
          </ol>
        </nav>

        <div class="mobil__navigation">
        <div class="toggle" id="toggle">
            <div class="toggle-line"></div>
            <div class="toggle-line"></div>
            <div class="toggle-line"></div>
          </div>
          <img src="ressources/images/Logo.png"/>
        </div>
        <nav class="mobil__links">
          <ol>
            <li class="mt-0"><a href="#">Mülltrennung</a><span class="mobil_menue_arrow"><img src="ressources/images/arrows.svg"></span></li>
            <li><a href="#">Umweltbewusstsein</a><span class="mobil_menue_arrow"><img src="ressources/images/arrows.svg"></span></li>
            <li><a href="#">Nachhaltigkeit</a><span class="mobil_menue_arrow"><img src="ressources/images/arrows.svg"></span></li>
            <li><a href="#">Teste dein Wissen</a><span class="mobil_menue_arrow"><img src="ressources/images/arrows.svg"></span></li>
          </ol>
        </nav>

        <div class="main__description">
          <div class="headline">
            <h1>Was ist Müll eigentlich?</h1>
            <div class="headline_line"></div>
          </div>
          </h1>
          <p>Abfall ist für uns all das,die bei der <b>Zubereitung oder Herstellung</b><br/>
            von etwas entstehen.</p>
        </div>
        <script src="js/script.js"></script>
    </body>
</html>

,

尝试将位置更改为绝对或相对

z-index