Question

http://lucasdebelder.be/googledoodle/

我想让行星（底部图像）位于顶部图像（蓝色背景/空间）的顶部。我在div class:"center"上设置了一个主'position: absolute'，并且这两个图片周围都是一个用position: relative;包裹的div，但不知怎的，他们不想去坐在每个图片上面另外，我也尝试过z-index，但这也不起作用。

提前致谢。

Answer 1

将这些属性用于planeet_achtergrond类：

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

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

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。

如果你想在div中使用 position：absolute 放置div，请对父div使用 position：relative 。

如果你想坚持div底部，只使用 bottom：0

为什么这两个图像不想相互叠加？

3 个答案: