Question

我正在尝试在我的主要父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>

Answer 1

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

以下将导致绝对定位的子项保持在包含div中：

#container {
    position: relative;
}

Answer 2

以下是您需要做的事情（请参阅div和text-align属性的宽度）：

你可以给它们背景颜色，看看z-index是否完美有效：）

＆＃13;

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

＆＃13;

<div id="container" class="container text-center">
  <div id="first">Hi</div>
  <div id="second">Hello</div>
</div>

＆＃13;

Answer 3

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

您可以做的一件事是将容器设置为position: relative和全宽（即width: 100vw），然后将其子项设置为width: 100%。然后内部div将采用其父级的宽度。

See this working JSFiddle

Answer 4

＆＃13;

#container {
  position: relative;
  width: 100%;
  height: 100px;
  background-color: yellow;
  display: flex;
  justify-content: center;
  align-items: center;
}
#first{
    position: absolute;
}
#second{
    position: absolute;
}

＆＃13;

<div id="container" class="container"> 
    <div id="first">Hi</div>
    <div id="second">Hello</div>
</div>

＆＃13;

Answer 5

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

因此，文本在技术上仍然是＃34;居中＆＃34;在每个相应的div中，因为他们从text-align: center div继承container。

然而，divs＆＃39;宽度将自动变宽（即在这种情况下适合文本）。

您可以采取以下两种方法之一：

强制div居中

给两个div以下（额外）CSS：

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

这将把它们放在父母div中。

或

强制div与其父级

的大小相同

给两个div以下（额外）CSS：

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

这会将div设置为跨越整个父级的高度和宽度。

在这两种情况下，您可能需要让.container类使用position: relative，以便子div具有某些内容是absolute到。

如果你正在使用Bootstrap，则无需担心这一点，因为.container类已经应用了此功能。

希望其中一种解决方案可以帮助您：）

Answer 6

试试这种风格：

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

覆盖DIV的内容

6 个答案: