试图将一个div覆盖在另一个div之上

Question

在这段代码中，我试图将一个导航栏(content1)覆盖在另一个导航栏（content）之上，但似乎什么都不起作用。我做错了什么？即使我可以使其覆盖，它们也不是以容器为中心放置的。

null

css prettyprint-override">* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  width: 100%;
  background-color: blue;
  height: 70px;
  position: relative;
}

#content {
  max-width: 1200px;
  background-color: blue;
  display: flex;
  margin: 0 auto;
  position: absolute;
  z-index: 9;
}

#content1 {
  max-width: 1200px;
  background-color: red;
  display: flex;
  margin: 0 auto;
  z-index: 0;
}

.logo {
  display: flex;
  align-items: center;
  color: white;
  font-size: 23px;
  font-weight: 900;
  margin: 15px;
  font-family: 'Roboto Slab', serif;
}

.container .nav {
  display: flex;
  padding: 10px 10px 10px 100px;
  align-items: center;
  height: 70px;
}

.nav li {
  margin: 20px;
  list-style-type: none;
  color: white;
  font-family: 'Roboto Slab', serif;
  display: flex;
}

.nav {
  margin-left: 150px;
}

.search {
  background-color: red;
  opacity: 0.90;
  height: 70px;
  display: flex;
  align-items: center;
  padding: 10px 10px 10px 390px;
  color: white;
}

<div class="container">
  <div id="content">
    <div class="logo">Google</div>
    <ul class="nav">
      <li>Home</li>
      <li>Services</li>
      <li>Products</li>
      <li>Feedback</li>
    </ul>
    <div class="search"><i class="fas fa-search"></i></div>
  </div>
  <div id="content1">
    <div class="logo">Google</div>
    <ul class="nav">
      <li>Home</li>
      <li>Services</li>
      <li>Products</li>
      <li>Feedback</li>
    </ul>
    <div class="search"><i class="fas fa-search"></i></div>
  </div>
</div>

null

只是想知道如何将我的导航条覆盖在另一个导航条之上并使其在容器中居中,

Answer 1

由于这两个对象已经在一个容器中，因此它们从其父对象继承了一个Z索引。如果您只有两个，重新排序就足够简单了。

我相信，将两个容器中的一个发送到后台，将它们层叠在一起会更容易。由于您正在尝试将第二个容器覆盖在第一个容器之上，因此第一个容器的位置应设置为absolute。
完成此操作后，只需将第一个容器设置为z-index:-1；并且将第二个容器设置为任何非负值即可。

这应该起作用：

#content {
  max-width: 1200px;
  background-color: blue;
  display: flex;
  margin: 0 auto;
  position: absolute;
  z-index: -1;
}
#content1 {
  max-width: 1200px;
  background-color: red;
  display: flex;
  margin: 0 auto;
  z-index: 0;
}

解决这个问题的一个更好的方法是将两个Navbar包装在一个容器中，并使用类将它们设置成相同的。然后，使用position:absolute；简单地修改要覆盖的navbar的位置。

下面是一个大致的示例：
HTML

<div class="container">
  <div id="wrap">
  
    <div id="content" class="contents">
      <div class="logo">Google</div>
      <ul class="nav">
        <li>Home</li>
        <li>Services</li>
        <li>Products</li>
        <li>Feedback</li>
      </ul>
      <div class="search"><i class="fas fa-search"></i></div>
    </div>
    
    <div id="content1" class="contents">
      <div class="logo">Google</div>
      <ul class="nav">
        <li>Home</li>
        <li>Services</li>
        <li>Products</li>
        <li>Feedback</li>
      </ul>
      <div class="search"><i class="fas fa-search"></i>test</div>
    </div>
    
  </div>
</div>

CSS

.container {
  width: 100%;
  background-color: blue;
  height: 70px;
  position: relative;
}

#wrap {
  display: flex;
  position: relative;
  max-width: 1200px;
  height: 100%;
  margin: 0 auto;
  background-color: green;
}

.contents {
  top: 0;
  left: 0;
  margin: 0 auto;
  height: 100%;
  width: 100%;
}

#content {
  background-color: blue;
  z-index: 0;
}

#content1 {
  position: absolute;
  z-index: 1;
  background-color: red;
}

Answer 2

如果我理解正确，您需要更改#content1的z-index属性，并添加position:absolute。

如果元素具有绝对位置，则其位置将不依赖于其他元素的位置（https://developer.mozilla.org/en-us/docs/web/css/position）

如果两个元素位于屏幕上的同一位置，则将显示具有较高z-index属性的元素(https://developer.mozilla.org/en/docs/web/css/z-index)

null

css prettyprint-override">* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  width: 100%;
  background-color: blue;
  height: 70px;
  position: relative;
}

#content {
width:100%;
  background-color: blue;
  display: flex;
  margin: 0 auto;
  position: absolute;
  z-index: 9;
}

#content1 {
  position:absolute;
  width:100%;
  background-color: red;
  display: flex;
  margin: 0 auto;
  z-index: 10;
}

.logo {
  display: flex;
  align-items: center;
  color: white;
  font-size: 23px;
  font-weight: 900;
  margin: 15px;
  font-family: 'Roboto Slab', serif;
}

.container .nav {
  display: flex;
  padding: 10px 10px 10px 10px;
  align-items: center;
  height: 70px;
}

.nav li {
  margin: 20px;
  list-style-type: none;
  color: white;
  font-family: 'Roboto Slab', serif;
  display: flex;
}

.nav {
  margin-left: 150px;
}

.search {
  background-color: red;
  opacity: 0.90;
  height: 70px;
  display: flex;
  align-items: center;
  padding: 10px 10px 10px 10px;
  color: white;
}

<div class="container">
  <div id="content">
    <div class="logo">Google</div>
    <ul class="nav">
      <li>Home</li>
      <li>Services</li>
      <li>Products</li>
      <li>Feedback</li>
    </ul>
    <div class="search"><i class="fas fa-search"></i></div>
  </div>
  <div id="content1">
    <div class="logo">Google</div>
    <ul class="nav">
      <li>Home</li>
      <li>Services</li>
      <li>Products</li>
      <li>Feedback</li>
    </ul>
    <div class="search"><i class="fas fa-search"></i></div>
  </div>
</div>