为什么这两张图片不想叠加在一起？

Question

我想让行星（下图）位于上图（蓝色 background/space）之上。我在 'position: absolute' 上设置了一个主要的 div class:"center"，并且在这两个图像周围分别有一个 div 包裹着 position: relative; 但不知何故，他们不想去坐在上面彼此，我也用 z-index 尝试过，但这也不起作用。

提前致谢。

Answer 1

我建议将两张图片嵌套在 div 中，然后向每张图片添加 class。然后使用 margin: 0 auto 将 div 置于页面中心。这是我的解决方案：

#googledoodle {
  position: relative;
  top: 0;
  left: 0;
  height:512px;
  width:900px;
  margin: 0 auto;
  overflow: hidden;
}
.galaxy {
  position: relative;
  top: 0;
  left: 0;
}
.planet {
  position: absolute;
  top: 380px;
  left: 0px;
}

<div id="googledoodle">
 <img src="http://lucasdebelder.be/googledoodle/images/galaxy.png" width="900" class="galaxy">
 <img src="http://lucasdebelder.be/googledoodle/images/planeet.png" width="950" class="planet">
</div>

Answer 2

使用这些属性 planeet_achtergrond class:

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

Answer 3

我改变了所有 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。

如果你想将 divs 放在 div 中 position:absolute，使用 position:relative parent div。

如果你想贴一个div底部，只使用底部:0

为什么这两张图片不想叠加在一起？

Why do these two images not wanna go on top of each other?

html

css

z-index

css-position

css-animations