Mehrere bilder relativ zu einem DIV übereiander legen

[Andre]

Wie bekomme ich es ohne größeren Aufwand hin, mehrere Bilder in einem DIV übereinander anzeigen zu lassen. Mit position:absolute; wäre die Sache ja kein Problem, jedoch funktioniert das in meinem Fall nicht, da ich eine dynamische Karte anzeigen möchte, die eingebettet in einer Seite angezeigt wird, die eine variable Breite hat.

Ich hatte also Die Idee, mit position:relative; zu arbeiten, was soweit auch ganz gut läuft. Jedoch werden die Bilder nicht relativ zum Mutterframe positioniert sondern relativ zum letzten gezeichneten.

Beispiel:
<div style="width:400px; height:400px; margin:auto; background-color:#0C0;">
  <img src="graben.png" style="position:relative; top:35px; left:38px;" />
  <img src="burg.png" style="position:relative; top:0px; left:0px;" />
</div>

Auch ein Einbetten der Bilder in DIVs bringt keine Änderung - natürlich mit ausgelagertem Style...

Danke schonmal für Eure Hilfe.

[Steel]

Hi!

Natuerlich. Relativ bedeutet relativ zu ihrer normalen Position. Absolut bedeutet in Bezug auf das positionierte Elternlement.

[Andre]

Natuerlich. Relativ bedeutet relativ zu ihrer normalen Position. Absolut bedeutet in Bezug auf das positionierte Elternlement.+

Also nicht zwingend absolut zur kompletten Seite?

[Steel]

Hoi,

Also nicht zwingend absolut zur kompletten Seite?

Genau. Mit position:relative legst Du fest, dass alle Positionsangaben sich auf den Punkt beziehen, den das Element sonst haette. top:0 left:0 ist also die linke obere Ecke des angesprochenen Elements und nicht von irgendeinem anderen Element der Seite. Mit dieser Information im Kopf, kann man schon einiges positionieren. Generell ist eine absolute Positionierung nur bedingt zu empfehlen und eine relative vorzuziehen.

Natuerlich macht es hin und wieder schon Sinn absolut zu positionieren. Hierbei sollte man aber beachten, dass das Elternelement eine Angabe zur Positionierung ausser static (default) enthaelt, sonst wird im Elementbaum soweit nach oben gesprungen, bis ein positioniertes Element gefunden wird - eventuell also Das Dokument selbst.

Angenommen du hast 2 verschachtelte Divs: Das aeussere relativ positioniert, das innere gar nicht (default mit static). Im Inneren positionierst Du ein Bild absolut an top:0 left:0. Dann wird dieses Bild an der linken oberen Ecke des aeusseren Divs positioniert. Gibst Du dem inneren aber eine position Eigenschaft (z.b. auch relativ) haengt das Bild an der linken oberen ecke des inneren Divs.

http://de.selfhtml.org/css/eigenschaften/positionierung.htm

[Andre]

Erst einmal danke für die umfangreiche Erläuterung, dennoch habe ich es so nicht hinbekommen. Ich habe den Code von oben jetzt dahingehend geändert, dass der DIV eine relative Position von 0/0 hat, doch geändert hat sich nichts - leider :(.

Hast Du eine Idee? Der Code da oben ist komplett. Die Burg soll praktisch über dem graben angezeigt werden und nicht wie jetzt darunter.

[Steel]

Hi!

Klar hab ich. hast Du schonmal negative Werte versucht? engenommen du hast 2 Grafiken. Eine ist 100x100 Pixel und stellt einen Burggraben dar. Die zweite ist 50x50 und stellt eine Burg dar. Um die Burg in den Graben zu bekommen, fuegst Du beide Bilder in das Dokument ein. Normalerweise sollten sie jetzt hintereinander stehen, aber auch untereinander ist moeglich. Es gibt 2 Moeglichkeiten:

Relativ: Du gibst dem 2. Bild position:relative und top:25px sowie left:-75px mit. Damit verschiebst Du das Bild 25 Pixel nach unten und 75 Pixel nach links. Wenn es also vorher rechts neben dem groesseren Bild lag, sollte es nun ziemlich genau mittig darueber liegen.

Ich wuerde in diesem Fall aber die absolute Postitionierung vorziehen.
Hierfuer benoetigst Du noch einen Container um die Bilder. Das hast Du ja. Dem gibst Du am besten die Groesse des groesseren Bildes (der Graben mit 100x100) und legst per overflow auch noch fest, dass er sich nit vergroessern soll. Da packst Du dann beide Bilder rein. Du solltest jetzt erstmal nur den Graben sehen, denn die Burg wird ja abgeschnitten. Dem Container gibst du position:relative und der Burg position:absolute. Wenn Du nun noch der Burg top und left 25px zuweist, sollte sie wieder mittig ueber dem Graben liegen.

Schrei, wenns klappt.

[Andre]

Schrei, wenns klappt.

Jo, klappt jetzt. Danke für die umfangreiche Hilfe!

[Andre]

Natuerlich. Relativ bedeutet relativ zu ihrer normalen Position. Absolut bedeutet in Bezug auf das positionierte Elternlement.

Habe es gerade erfolglos probiert.