为什么这两个图像不想彼此重叠？

http://lucasdebelder.be/googledoodle/为什么这两个图像不想彼此重叠？

我想在顶部图像（蓝色背景/空间）顶部有行星（底部图像）。我有一个主要的div class:"center"设置'position: absolute'和周围的这些图像是分开一个div与position: relative;包裹但不知何故，他们不想去坐在对方的顶部，我也尝试过与z-index但它并没有'不管工作。

在此先感谢。

来源

2017-04-01 Panic

包括相关的代码后，请不要只是链接到你的网站。您的网站会随着时间的推移而改变，并且在您的文章中没有原始代码，但是从现在开始，这些帖子在搜索此问题时对社区毫无用处，并且无法引用原始代码。你可以在这里阅读更多http://stackoverflow.com/help/how-to-ask，看看如何创建[mcve] –

使用这些属性的planeet_achtergrond类：

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

来源

2017-04-01 18:30:07 Jeff

我会推荐在一个div中嵌套两个图像，然后为每个图像添加一个类。然后使用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"> 
 
\t <img src="http://lucasdebelder.be/googledoodle/images/galaxy.png" width="900" class="galaxy"> 
 
\t <img src="http://lucasdebelder.be/googledoodle/images/planeet.png" width="950" class="planet"> 
 
</div>

来源

2017-04-01 18:14:59 wykydtronik

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

如果你想坚持一个div底部，只能使用底部：0

来源

2017-04-01 18:44:17 patapity

为什么这两个图像不想彼此重叠？

回答

相关问题