Html 试图将一个div覆盖到另一个div上_Html_Css

Html 试图将一个div覆盖到另一个div上

html css

Html 试图将一个div覆盖到另一个div上,html,css,Html,Css,在这段代码中，我试图将一个导航栏content1覆盖在另一个内容之上，但似乎没有任何效果。我做错了什么？即使我可以使其覆盖，它们也不会放置在容器的中心 * { 保证金：0；填充：0；框大小：边框框； } .集装箱{ 宽度：100%；背景颜色：蓝色；高度：70像素；位置：相对位置； } 内容{ 最大宽度：1200px；背景颜色：蓝色；显示器：flex；保证金：0自动；位置：绝对位置； z指数：9； } 内容1{ 最大宽度：1200px；背景色：红色；显示器：flex；保证

在这段代码中，我试图将一个导航栏content1覆盖在另一个内容之上，但似乎没有任何效果。我做错了什么？即使我可以使其覆盖，它们也不会放置在容器的中心

* { 保证金：0；填充：0；框大小：边框框； } .集装箱{ 宽度：100%；背景颜色：蓝色；高度：70像素；位置：相对位置； } 内容{ 最大宽度：1200px；背景颜色：蓝色；显示器：flex；保证金：0自动；位置：绝对位置； z指数：9； } 内容1{ 最大宽度：1200px；背景色：红色；显示器：flex；保证金：0自动； z指数：0； } .标志{ 显示器：flex；对齐项目：居中；颜色：白色；字体大小：23px；字号：900；利润率：15px；字体系列：“Roboto Slab”，衬线； } .集装箱导航{ 显示器：flex；填充：10px 10px 10px 100px；对齐项目：居中；高度：70像素； } 李国荣先生{ 利润率：20px；列表样式类型：无；颜色：白色；字体系列：“Roboto Slab”，衬线；显示器：flex； } .导航{ 左边距：150像素； } .搜索{ 背景色：红色；不透明度：0.90；高度：70像素；显示器：flex；对齐项目：居中；填充：10px 10px 10px 390px；颜色：白色； } 谷歌家服务产品反馈谷歌家服务产品反馈解决方案1 因为这两个对象已经在一个容器中，所以它们从其父对象继承了一个z索引。如果您只有两个，那么对它们重新排序就足够简单了

我相信，将两个容器中的一个发送到背景中，使它们相互叠加，会更容易。由于您试图将第二个容器覆盖在第一个容器上，因此第一个容器的位置应设置为绝对位置。完成此操作后，将第一个容器设置为具有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;
}

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

下面是一个大致的示例，说明了它的外观： HTML

解决方案1 因为这两个对象已经在一个容器中，所以它们从其父对象继承了一个z索引。如果您只有两个，那么对它们重新排序就足够简单了

这应该起作用：

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

下面是一个大致的示例，说明了它的外观： HTML

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

如果该元素具有绝对位置，则其位置将不取决于其他元素的位置

如果两个元素位于屏幕上的同一位置，则将显示具有更高z索引属性的元素

* { 保证金：0；填充：0；框大小：边框框； } .集装箱{ 宽度：100%；背景颜色：蓝色；高度：70像素；位置：相对位置； } 内容{ 宽度：100%；背景颜色：蓝色；显示器：flex；保证金：0自动；位置：绝对位置； z指数：9； } 内容1{ 位置：绝对位置；宽度：100%；背景色：红色；显示器：flex；保证金：0自动； z指数：10； } .标志{ 显示器：flex；对齐项目：居中；颜色：白色；字体大小：23px；字号：900；利润率：15px；字体系列：“Roboto Slab”，衬线； } .集装箱导航{ 显示器：flex；填充：10px 10px 10px 10px；对齐项目：居中；高度：70像素； } 李国荣先生{ 利润率：20px；列表样式类型：无；颜色：白色；字体系列：“Roboto Slab”，衬线；显示器：flex； } .导航{ 左边距：150像素； } .搜索{ 背景色：红色；不透明度：0.90；高度：70像素；显示器：flex；对齐项目：居中；填充：10px 10px 10px 10px；颜色：白色； } 谷歌家服务产品反馈谷歌家服务产品反馈

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

如果该元素具有绝对位置，则其位置将不取决于其他元素的位置

如果两个元素位于屏幕上的同一位置，则z-ind较高的元素将显示ex属性

你能澄清一下你想覆盖什么吗？我想覆盖什么？你能澄清一下你想覆盖什么吗？我想覆盖什么谢谢，成功了！我想指出的是，在阅读了@Ichinator的回答后，这个位置是：绝对的；财产可能在这项工作中发挥了至关重要的作用。我会更新我的答案，包括这个！但是它消失了！回到集装箱的后面，移到left@Solomondavid通过设置位置：绝对；删除该对象的所有位置参照。本质上，它在屏幕上有一个独立的位置。我认为，如果删除.container的背景色，第一个container应该会再次显示。最后，最好将两个位置都设置为绝对位置，并使用父容器作为位置和比例的参考。我会更新我的答案，包括一个替代的解决方案。谢谢你，它的工作！我想指出的是，在阅读了@Ichinator的回答后，这个位置是：绝对的；财产可能在这项工作中发挥了至关重要的作用。我会更新我的答案，包括这个！但是它消失了！回到集装箱的后面，移到left@Solomondavid通过设置位置：绝对；删除该对象的所有位置参照。本质上，它在屏幕上有一个独立的位置。我认为，如果删除.container的背景色，第一个container应该会再次显示。最后，最好将两个位置都设置为绝对位置，并使用父容器作为位置和比例的参考。我将更新我的答案以包含一个替代解决方案。在他们的问题中，其中一个对象的位置已设置为绝对。我认为，以这种方式设置集装箱的两个位置可能不是解决这一问题的最有效方法。其中一个容器有一个稳定的位置，因此只有两个容器中的一个应该修改其位置。@ichinator我尝试了您的代码现在div不是容器的中心，它在左侧，如何使中心位于容器内？为什么要将内容和内容居中？它不需要整个容器的宽度吗？在他们的问题中，其中一个对象的位置已经设置为绝对。我认为，以这种方式设置集装箱的两个位置可能不是解决这一问题的最有效方法。其中一个容器有一个稳定的位置，因此只有两个容器中的一个应该修改其位置。@ichinator我尝试了您的代码现在div不是容器的中心，它在左侧，如何使中心位于容器内？为什么要将内容和内容居中？它不占整个集装箱的宽度吗？

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