AnnaSS2109
02.01.2024, 12:38
Elemente in css schräg übereinander legen?

Ich habe folgendes Problem:

Ich möchte gerne den weißen Kasten mit dem Text drinnen rechts neben den Kasten mit der Flasche legen, aber die beiden sollen sich so halbwegs überschneiden (Wie in dem einen Beispiel Bild zu sehen)

Das sind mein akuteller HTML und CSS code:

Ich habe auch schon im Internet gesucht und dort steht überwiegend, dass ich was mit der id machen muss, da passiert aber irgendwie nicht das, was ich will... :/

...zum Beitrag
Antwort
von verreisterNutzer
02.01.2024, 21:06

Bei mir stellt es sich – soweit ich Deine Frage verstehe – korrekt dar:

Bild zum Beitrag

Mithilfe von margin-left: 90%; und margin-top: 10%; verschiebst Du den Textkasten .h2_box, der sich innerhalb von .h_box mit dem Bild befindet, nach rechts und ein wenig nach unten. Es könnte sein, dass Du ein CMS verwendest und deswegen die CSS-Styles nicht korrekt angewendet werden.

Im HTML ist ein kleiner Fehler: Das schließende div-Tag in Zeile 18 oder 19 muss entfernt werden und entweder nach dem schließenden figure-Tag oder nach dem section-Element eingefügt werden. Auch fehlt im CSS bei border: 4px #BCECB2; die border-style-Angabe solid.

Du kannst statt Margins das Element .h2_box mittels position: relative; sowie top und left verschieben:

.h2_box {
    position: relative;
    top: 20px;
    left: 300px;
    /* oder flexibel mit Prozentangabe: */
    left: 100%;
    width: 400px;
    height: 400px;
    …
}

JSFiddle: https://jsfiddle.net/1odkbz8f/

 ...zur Antwort