Warum wollen diese beiden Bilder nicht übereinander liegen?

Question

http://lucasdebelder.be/googledoodle/

Ich möchte den Planeten (unteres Bild) oben auf dem oberen Bild (der blaue Hintergrund/Raum) haben. Ich habe eine Haupt div class:"center" auf 'position: absolute' gesetzt und um beide dieser Bilder ist separat ein div mit position: relative; gewickelt, aber irgendwie wollen sie nicht gehen und sitzen übereinander, ich habe es auch mit z-index versucht, aber das doesn ' t arbeiten entweder.

Vielen Dank im Voraus.

Answer 1

diese Eigenschaften die planeet_achtergrond Klasse verwenden:

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

Answer 2

Ich würde empfehlen, die zwei Bilder in einem Div zu verschachteln und dann jedem Bild eine Klasse hinzuzufügen. Verwenden Sie dann margin: 0 auto, um das div auf die Seite zu zentrieren. Dies ist meine Lösung:

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

Answer 3

ich alle CSS geändert. Hier Beispiel:

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

Verwendung overflow: hidden äußeren div.

wenn Sie wollen Platz divs innerhalb eines div mit position: absolute, verwenden position: relative für Eltern div.

, wenn Sie einen div Boden bleiben möchten, verwenden Sie nur bottom: 0