[ERLEDIGT] Image Overlay

[CSSteff]

Hi,
ich möchte gerne ein Bild über ein anderes überlagern. Das klappt solange gut, solange man den Browserfenster nicht verkleinert. Dann verschiebt sich nämlich das Overlay:

<img src="image.jpg" style="display: block; margin-left: auto; margin-right: auto; width:1120; height: 840;">

<img src="overlay.png" style = "position:absolute; top:235px; left:256px; width:218px; height:218px;">

Wenn ich alles linksbündig und nicht zentriert mache, klappt alles, aber das sieht nicht gut aus.
Kann man das Overlay nicht irgendwie relativ zur Grafik positionieren?
Bin für alle Lösungen dankbar, egal ob CSS oder JS.

Danke im Voraus!
CSStef

 

[threadi]

Absolut positionierte Elemente richten sich am nächsten nicht-static-positionierten Element im DOM nach oben aus. Wenn keines gefunden wird, dann ist der Viewport der Bereich an dem sie sich ausrichten. In deinem Fall musst Du vermutlich lediglich bei einem umgebenden Element

position: relative;

ergänzen.

Und bei jeder nicht-static-Positionierung bitte auch auf den z-index achten mit dem Du Überlappungen steuern kannst.

 

[CSSteff]

Hatte ich schon versucht. Ich habe das dahingehend gelöst, dass ich mir per JavaScript einfach das linke Offset geholt habe:

document.getElementById("target").getBoundingClientRect().left

Den Wert + der relativen Postion habe ich dann einem anderem Element zugewiesen.

L. G.,
CSSteff

 

[threadi]

Wenn Du das bisher schon versucht hattest, hast Du irgendetwas falsch gemacht. Was du falsch gemacht hast kann man ohne Link auf deinen Versuch nicht beurteilen.

 

[CSSteff]

Ich hatte sowohl bei image.jpg als auch bei overlay.png, position:relative ausprobiert.
Meintest du das?

L. G.,
CSSteff

 

[threadi]

Nein, das meinte ich nicht. Bitte lies nochmal meinen Beitrag und informiere dich über absolute Positionierung von Elementen. Wenn Du weiterhin Fragen hast, zeig einen Link zu deiner Seite.

 

[Flemli200]

Um da mal dazwischen zu funken...
Ist es nicht rein theoretisch so, das die Überlagerung von prio 1 bis prio 4 wie folgt aussieht?
1. Fixed
2. Absolute
3. Relative
4. Keine Angabe

Also musstest du doch nur bei einem der Elemente das "position: relative" entfernen...

EDIT: ich sollte vor der Antwort nicht nur den ersten und letzten Eintrag richtig und das dazwischen überfliegend lesen... Nu hab ich ihm die Antwort auf dem Tablett serviert ;)