时间戳

首页 > 解决方案 > 如何使用 z 索引来堆叠 div

html - 如何使用 z 索引来堆叠 div

问题描述

所以我正在尝试使用 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;

标签： htmlcss

解决方案

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

推荐阅读