Html 为什么这两张照片不想互相重叠？

我想把行星（下图）放在上图（蓝色背景/空间）的顶部。我有一个主要的

div类：“center”

设置在

'position:absolute'

上，在这两个图像的周围分别有一个用

position:relative包装的div

但不知何故，他们不想坐在一起，我也尝试过使用

z-index

，但这也不起作用

---

提前感谢。

我建议将两个图像嵌套在一个div中，然后为每个图像添加一个类。然后使用边距：0自动将div居中到页面。这是我的解决方案：

#谷歌涂鸦{
位置：相对位置；
排名：0；
左：0；
高度：512px；
宽度：900px；
保证金：0自动；
溢出：隐藏；
}
.银河{
位置：相对位置；
排名：0；
左：0；
}
.星球{
位置：绝对位置；
顶部：380px；
左：0px；
}

---

在Planet\u achtergrond类别中使用以下属性：

.planeet_achtergrond{
  position: absolute;
  bottom: 150px;
}

---

我改变了所有的css。此处示例：

.center {
    position: relative;
    text-align: center;
    width: 900px;
    margin: auto;
    overflow: hidden;
    height: 500px;
}
.space_achtergrond {
    width: 100%;
    z-index: 0;
    position: absolute;
    height: auto;
    bottom: 0;
}
.planeet_achtergrond {
    width: 100%;
    height: auto;
    z-index: 100;
    position: absolute;
    bottom: -15px;
}
form {
    position: absolute;
    bottom: 15px;
    z-index: 999;
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
}

使用溢出：隐藏外部分区

如果要将div放置在位置为“绝对”的div中，请使用父div的位置为“相对”

---

如果你想粘贴一个div底部，请只使用底部：0

在帖子中包含相关代码，不要只链接到你的站点。你的网站会随着时间的推移而改变，如果你的帖子中没有原始代码，那么当社区从现在开始搜索这个问题时，帖子对他们来说是无用的，并且不能引用原始代码。您可以在此处阅读更多内容，并了解如何创建