Javascript 覆盖DIV的内容

我试图在我的主父分区中覆盖2个分区： 我想把第二个div叠加在第一个div的上面。我有一个问题覆盖它，因为我不能保持它在屏幕中间。 我尝试了以下方法：

覆盖层在这里工作得很好，但是当我这样做时，我的容器不再居中。如何覆盖并保持其中心

div{
边框：5px纯红；
}
#首先{
位置：绝对位置；
z指数：1；
边框颜色：橙色；
}
#第二{
位置：绝对位置；
z指数：2；
边框颜色：绿色；
}

你好
你好

定位绝对时，定位的元素将从文档流中取出，并相对于不是默认位置的下一个最高父元素进行定位，即非位置：静态

以下操作将导致绝对定位的子对象停留在包含的div中：

#container {
    position: relative;
}

---

定位绝对时，定位的元素将从文档流中取出，并相对于下一个最高的父元素进行定位，该父元素不是默认位置，即非位置：静态

以下操作将导致绝对定位的子对象停留在包含的div中：

#container {
    position: relative;
}

---

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

您可以做的一件事是将容器设置为

位置：相对
和全宽（即
宽度：100vw
），然后将其子容器设置为
宽度：100%
。
然后内部
div
s将采用其父级的宽度

.
您的容器的文本不再居中，因为您已从文档流中删除其子项。本质上，它没有内容和折叠，因此没有文本对齐的宽度

您可以做的一件事是将容器设置为
位置：相对
和全宽（即
宽度：100vw
），然后将其子容器设置为
宽度：100%
。
然后内部
div
s将采用其父级的宽度

.

#容器{
位置：相对位置；
宽度：100%；
高度：100px；
背景颜色：黄色；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
#首先{
位置：绝对位置；
}
#第二{
位置：绝对位置；
}

你好
你好

#容器{
位置：相对位置；
宽度：100%；
高度：100px；
背景颜色：黄色；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
#首先{
位置：绝对位置；
}
#第二{
位置：绝对位置；
}

你好
你好
以下是您需要执行的操作（请参见divs和text align属性的宽度）：

您可以给他们背景色，让他们看到z索引完美地工作：）


#首先{
文本对齐：居中；
高度：300px；
宽度：100%；
位置：绝对位置；
z指数：1；
}
#第二{
文本对齐：居中；
高度：300px；
宽度：100%；
位置：绝对位置；
z指数：2；
}

你好
你好
以下是您需要执行的操作（请参见divs和text align属性的宽度）：

您可以给他们背景色，让他们看到z索引完美地工作：）


#首先{
文本对齐：居中；
高度：300px；
宽度：100%；
位置：绝对位置；
z指数：1；
}
#第二{
文本对齐：居中；
高度：300px；
宽度：100%；
位置：绝对位置；
z指数：2；
}

你好
你好
您的主要问题是
div
与父div没有任何相对宽度

因此，从技术上讲，文本仍然在每个相应的div中“居中”，因为它们继承了
容器
div中的
text align:center

但是，div的宽度将自动达到所需的宽度（即，在本例中，为了适合文本）


您可以通过以下两种方式之一解决此问题：

强制div居中

为两个div提供以下（额外）CSS：

这实际上会将他们集中在他们的父div中


或

强制div与其父级大小相同

为两个div提供以下（额外）CSS：

这会将div设置为跨越其整个父对象的高度和宽度


在这两种情况下，您可能需要使
.container
类使用
position:relative
，以便子div具有绝对的属性

如果您使用的是引导，则无需担心这一点，因为
.container
类已经应用了此功能


希望这些解决方案之一能帮助您：）
您的主要问题是
div
s与父div之间没有任何相对宽度

因此，从技术上讲，文本仍然在每个相应的div中“居中”，因为它们继承了
容器
div中的
text align:center

但是，div的宽度将自动达到所需的宽度（即，在本例中，为了适合文本）


您可以通过以下两种方式之一解决此问题：

强制div居中

为两个div提供以下（额外）CSS：

这实际上会将他们集中在他们的父div中


或

强制div与其父级大小相同

为两个div提供以下（额外）CSS：

这会将div设置为跨越其整个父对象的高度和宽度


在这两种情况下，您可能需要使
.container
类使用
position:relative
，以便子div具有绝对的属性

如果您使用的是Bootstrap，就不必担心这个问题，因为
.container
类已经有了这个ap
top: 0;
bottom: 0;
left: 0;
right: 0;

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