Question

因此，我正在尝试使用CSS和HTML设计我的第一个网站。但是我遇到了一个问题。我试图使用内容容器旁边的个人资料图片制作一个简单的侧边栏。但是，该div向下推另一个div而不是落后于它。我使用了相对位置和z索引，但似乎没有任何作用。

这是现在代码的样子。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <link
      href="https://fonts.googleapis.com/css?family=Roboto&display=swap"
      rel="stylesheet"
    />
    <title>Document</title>
  </head>
  <body>
    <div id="sidebar">
      <img src="./Img/pepe.png" alt="" />
    </div>
    <div class="contentbox"></div>
    <div class="Wrapper">
      <header>
        <h1>Welcome To My Site</h1>
        <h2>First CSS Site</h2>
      </header>
      <nav>
        <ul class="meny">
          <li><a href="https://www.w3schools.com">Home</a></li>
          <li><a href="https://www.w3schools.com">About</a></li>
          <li><a href="https://www.w3schools.com">Contact</a></li>
        </ul>
      </nav>
    </div>
  </body>
</html>

CSS

* {
  padding: 0;
  margin: 0;
  font-family: "Roboto";
}

body {
 background-color: #E0F2E9;
}

#sidebar{

 border: 2px solid brown;
 text-align: right;
 margin-top: 50%;
margin-left: 0%
}

.contentbox{

 border: solid 2px red;
 width: 60vw;
 margin: 0 auto;
 background-color: white;
 height: 100vh;
 margin-top: 300px;
}


.Wrapper {
  border: 2px solid green;
  height: 250px;
  background-color: #5B7B7A;
  margin: auto;
  width: 95vw;
  position: absolute;
  top: 30px;
  right: 30px;
  left: 30px;
  border-radius: 5px;

}

.meny{
 text-align: center;
 line-height: 32px;
 border: 2px solid purple;
 padding: 10px 10px;
}

ul.meny{
 margin: 15px 10px;
 text-decoration: none;

}

.meny li{
 display: inline;
 padding: 0px 10px;

}

.meny a{
  text-decoration: none;
  color: white;
   font-size: 1em;
}

.Wrapper h1, h2 {
  margin: 10px;
  border: 2px solid blue;
  display: flex;
  text-align: center;
  justify-content: center;
  text-transform: uppercase;
  color: #ffffff;
}

.Wrapper h1 {
  padding: 30px;

}

.Wrapper h2 {
  padding: 4px;

Answer 1

z-index值是相对的，它取决于您，例如：我为div编写z-index：50，为另一个元素编写z-index：51。元素的z-index 51大于div的z-index值较小。我希望这会有所帮助。

如何使用Z索引堆叠div

1 个答案: