CSS und position

[[Dirk]]

Hallo

Ich habe da mal ne Frage. Und zwar: Nehmen wir an ich habe 2 Bilder, die ich überlagert darstellen möchte, also Bild2 soll auf Bild1.

Wenn ich jetzt beide Bilder normal mit

<div id="irgendwas">
<img id="BILD1" src="..." alt="" />
<img id="BILD2" src="..." alt="" />
</div>

lade sind sie ja untereinander. Wenn ich jetzt das 2. Bild mit

position: absolute;
top: -400px;

nach oben setze funktioniert das auch, allerdings werden sämtliche Objekte nicht mit nach oben gesetzt, so als wäre das Bild2 immer noch unter Bild1.

Also muss ich jedem Objekt darunter sagen, dass es um die Höhe von Bild2 nach oben gesetzt werden soll. z.B jedes mal

top: -300px;

Wie kann ich das anders, also besser lösen? Ich hoffe, es ist klar, was ich meine, bzw. wo mein Problem liegt :)

[Gast]

Die Höhe vom Div auf die von Bild 1 begrenzen?

[Mr_Karlo]

;9125081']Hallo
Wenn ich jetzt beide Bilder normal mit

<div id="irgendwas">
<img id="BILD1" src="..." alt="" />
<img id="BILD2" src="..." alt="" />
</div>

lade sind sie ja untereinander.



Bilder sind inline-Elemente und erzeugen im Normalfall keinen eigenen Absatz. Event. passiert das bei dir durch den normalen Zeilenumbruch weil z.B. der div-Container zu schmal ist.
Wenn du das so willst könntest du für Bild2 einen negativen margin-top Wert verwenden und nicht mit absoluter Positionierung arbeiten.

[Gohan]

Das div muss als Position "relalative" bekommen, die beiden Bilder jeweils top und left 0 bzw. reicht das auch nur für das Zweite.

Also etwa:

#irgendwas {
position: relative;
}

#irgendwas img {
position: absolute;
top: 0;
left: 0;
}

[Mr_Karlo]

Das div muss als Position "relalative" bekommen, die beiden Bilder jeweils top und left 0 bzw. reicht das auch nur für das Zweite.

Also etwa:

#irgendwas {
position: relative;
}

#irgendwas img {
position: absolute;
top: 0;
left: 0;
}


Was zur Folge hat, dass die Bilder absolut in Bezug auf #irgendwas ausgerichtet werden und somit direkt übereinander liegen. Allerdings löst das nicht das Problem des TS, dass 'sämtliche Objekte nicht mit nach oben gesetzt werden'. Was immer das genau bedeuten soll ;)

[Mr_Karlo]

Eigentlich kann man die Frage nicht korrekt beantworten da weder angegeben ist wie #irgendwas positioniert und formatiert ist noch wie die nachfolgenden Elemente positioniert und formatiert sind. Außerdem schreibt der TS, dass die Bilder 'normal' untereinander sind. Was 'normal' in diesem Fall bedeuten soll weiß ich nicht. Dem normalen Elementfluss entspricht es imo nicht.

Mit einem grundsätzlich Verständnis von Positionierungsarten (http://de.selfhtml.org/css/eigenschaften/positionierung.htm#allgemeines), Block- und Inlineelementen (http://de.selfhtml.org/html/referenz/elemente.htm#block_elemente), Innen (http://de.selfhtml.org/css/eigenschaften/innenabstand.htm)- und Außenabstand (http://de.selfhtml.org/css/eigenschaften/randabstand.htm), etc. sollte das für jeden machbar sein.

Für den Anfang sollte http://de.selfhtml.org/ und http://www.css4you.de/ ausreichen ;)

[smallB]

Das div muss als Position "relalative" bekommen, die beiden Bilder jeweils top und left 0 bzw. reicht das auch nur für das Zweite.

Also etwa:

#irgendwas {
position: relative;
}

#irgendwas img {
position: absolute;
top: 0;
left: 0;
}
Das sollte generell sogar funktionieren, allerdings ein wenig abgewandelt damit BILD2 nach "unten" rutscht:
#irgendwas {
position: relative;
}

#irgendwas #BILD1 {
position: absolute;
top: 0;
left: 0;
z-index:1;
}
#irgendwas #BILD2 {
position: absolute;
top: 400px;
left: 0;
z-index:2;
}

[[Dirk]]

ok, ich habe es inzwischen hinbekommen. Mit entsprechenden Angaben von position relative bzw absolute.

Jedenfalls vielen Dank :)