如果我理解正确，您需要更改#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

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

由于这两个对象已经在一个容器中，因此它们从其父对象继承了一个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;
}