覆盖DIV的内容

Overlay the Contents of a DIV

本文关键字：DIV 覆盖      更新时间：2023-09-26

我试图在我的主父div中覆盖2个div:我想在第一个div上叠加第二个div。我有一个问题覆盖它，因为我不能保持它在屏幕的中间。我试着叠加:

叠加在这里工作得很好，但我的容器不再是中心，当我这样做。如何叠加并保持居中?

div {
  border: 5px solid red;
}
#first {
  position: absolute;
  z-index: 1;
  border-color: orange;
}
#second {
  position: absolute;
  z-index: 2;
  border-color: green;
}
<div id="container" class="container text-center">
  <div id="first">Hi</div>
  <div id="second">Hello</div>
</div>

你需要这样做(查看div和text-align属性的宽度):

你可以给他们的背景颜色，看到z-index工作完美:)

#first {
  text-align: center;
  height: 300px;
  width: 100%;
  position: absolute;
  z-index: 1;
}
#second {
  text-align: center;
  height: 300px;
  width: 100%;
  position: absolute;
  z-index: 2;
}
<div id="container" class="container text-center">
  <div id="first">Hi</div>
  <div id="second">Hello</div>
</div>

当使用绝对定位时，被定位的元素将从文档流中取出，并相对于下一个最高的父元素进行定位，该父元素不是默认位置，即不是position: static;

以下命令将使绝对定位的子元素留在包含它的div内:

#container {
    position: relative;
}

容器的文本不再居中，因为您已经从文档流中删除了它的子元素。从本质上讲，它没有内容和折叠，因此，没有宽度来对齐文本。

您可以做的一件事是将容器设置为position: relative和全宽(即width: 100vw)，然后将其子设置为width: 100%。然后，内部的div s将取其父元素的宽度。

#container {
  position: relative;
  width: 100%;
  height: 100px;
  background-color: yellow;
  display: flex;
  justify-content: center;
  align-items: center;
}
#first{
    position: absolute;
}
#second{
    position: absolute;
}
<div id="container" class="container"> 
    <div id="first">Hi</div>
    <div id="second">Hello</div>
</div>

您的主要问题是div s将没有任何相对于父div的宽度。

因此，从技术上讲，文本仍然在每个相应的div中"居中"，因为它们从containerdiv继承了text-align: center。

但是，div的宽度会自动调整为所需的宽度(即适合文本，在这种情况下)。

有两种补救方法:

强制div居中

给这两个div添加如下(额外的)CSS:

left: 50%;
width: 100%;
margin-left: -50%;

这会将它们放在父div的中间。

或

强制div与父div的大小相同

给这两个div添加如下(额外的)CSS:

top: 0;
bottom: 0;
left: 0;
right: 0;

设置div跨越父元素的高度和宽度。

在两种情况下，您可能需要使.container类使用position: relative，以便子div有absolute的内容。

如果你正在使用Bootstrap，没有必要担心这个，因为.container类已经应用了这个。

希望这些解决方案对你有帮助:)

试试这个样式:

#first,
#second {
  left: 50%;
  transform: translate(-50%, 0);
}


div {
  border: 5px solid red;
}
#first {
  position: absolute;
  z-index: 1;
  border-color: orange;
}
#second {
  position: absolute;
  z-index: 2;
  border-color: green;
}
#first,
#second {
  left: 50%;
  transform: translate(-50%, 0);
}
<div id="container" class="container text-center">
  <div id="first">Hi</div>
  <div id="second">Hello</div>
</div>

相关文章：