爲什麼這兩個圖像不想彼此重疊？

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

爲什麼這兩個圖像不想彼此重疊？

回答

相關問題