Trying to overlay one div above another

Question

Here in this code I am trying to overlay one navigation bar (content1) above another (content), but nothing seems to be working. What am I doing wrong? Even if I can make it overlay, they are not placed centered within the container.

* {
  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>

Just want to know how to overlay my nav bar above another nav bar and make it center within the container,

Answer 1

Solution 1

Since the two objects are already inside a container, they inherit a z-index from their parent. If you just have two, reordering them is simple enough.

I believe it is easier to send one of the two containers to the background that layer them on top of one another. Since you are trying to overlay the second container over the first, the first one should have its position set to absolute.
With this done, it would suffice to set the first container to have z-index: -1; and the second one any non-negative value.

This should work:

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

Solution 2

A better way to tackle this problem it to wrap both navbars inside a container and initially setting them up as identical using classes. Then, simple modify the position of the navbar you want to overlay using position: absolute;.

Here is a rough example of how it should look:
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

If I understand right you need to change the z-index property of #content1 and add position:absolute.

If the element has an absolute position, its position will not depend on the position of the other element (https://developer.mozilla.org/en-US/docs/Web/CSS/position )

If two elements are on the same location on the screen, the element with the highter z-index property will be displayed ( https://developer.mozilla.org/en/docs/Web/CSS/z-index )

* {
  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>