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... :/

Answer 1

[Verelat777]

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

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/

Answer 2

[Mirko Marek]

Hi AnnaSS2109,

viele Wege führen nach Rom. Damit meine ich das es verschiedene Ansätze gibt um dies zu ermöglichen. Die Positionierung sollte hier ohne Grid erfolgen. Hier werden einfach die Elemente absolut positioniert, wobei diese Werte mithilfe auch von dynamischen Einheiten angegeben werden können. Hier dazu der passende Link: https://wiki.selfhtml.org/wiki/CSS/Tutorials/Ausrichtung/z-index

Woher ich das weiß: Recherche

Answer 3

[jjk123]

Um die Elemente zu positionieren, kannst du das "position" Attribut in CSS verwenden: https://www.w3schools.com/css/css_positioning.asp

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... :/

Ob du id oder class verwendest, ist in deinem Fall relativ egal.

Und du hast da übrigens einen Syntaxfehler in Zeile 19...