Question

我试图将2个div重叠在屏幕中央。我有一个

#div1 {
    width: 1100px;
    height: 100%;
    margin: 0 auto;
    background-color: blue;
    z-index: -1;
}
#div2 {
    width: 900px;
    height: 100%;
    margin: 0 auto;
    background-color: green;
    z-index: 0;
}

我的目标是让#div1在后面（居中），而#div2在前面（居中于顶部）。当我这样做时：

<div id="div1"></div>
<div id="div2">test</div>

它不会叠加它们。我还尝试在每个元素中添加fixed和relative position，这似乎会让事情变得更糟。有什么想法吗？

谢谢！

Answer 1

普通文档流程从上到下，因此当您在#div2之后声明#div1时，它会显示在#div1之后。如果您希望它显示在#div1的“顶部”，则需要在#div2内声明#div1。

这是你想要做的吗？

html, body {
  height: 100%;
  width: 100%;
}
#div1 {
    width: 500px; /* I changed the dimensions to help small screens */
    height: 100%;
    margin: 0 auto;
    background-color: blue;
}
#div2 {
    width: 300px; /* I changed the dimensions to help small screens */
    height: 100%;
    margin: 0 auto;
    background-color: green;
}

<div id="div1">
  <div id="div2"></div>
</div>

您不需要z-index，请始终记住使用语义标记名称而不是div1，div2。祝你好运！

Answer 2

这些是否有父

试试这个：

#parentdiv {
position: relative;}

#div1{
position:absolute;
width: 100%;}

div2{
position:absolute;
z-index:1;
width: 100%;}

希望这有帮助！ ^^

如何居中2 div（重叠）水平居中

2 个答案: