Bild in Verhältnis zu Bild positionieren

[Rolf B]

Hallo Shiela,

ich habe dein CSS mal etwas umgebrochen. Da kann man es gleich besser lesen.

Es gibt eine Beziehung zwischen position:absolute und position:relative: Ein absolut positioniertes Element positioniert sich relativ zu dem (in der Elternhierarchie) nächstliegenden Element mit position:relative. Wenn Du nicht selbst eins setzt, ist es der body.

Du hast dagegen ein Bild absolut und ein Bild relativ positioniert. Um die Bilder relativ zueinander zu positionieren, ist das nicht zielführend.

Es ist vermutlich sinnvoll, ein <figure> Element als gemeinsames Elternelement der beiden Bilder hinzuzufügen. Das <figure> Element machst Du position:relative, die Karte lässt Du das figure-Element füllen und den Stecker positionierst Du dann absolut im figure-Element.

Margin und Padding an den Images lässt Du weg. Steuere Abstände mit Margin und Padding am figure-Element. Die Karte positionierst Du am besten gar nicht, und den Stecker positionierst Du mit top und left.

Rolf