Wie lasse ich ein Bild in CSS einem DIV-Element überlappen?
Hallo,
ich veranstalte bald eine Reihe von Gewinnspielen anlässlich des 10-jährigen Bestehens. Über die volle Breite des Bildschirms soll am unteren Rand fixiert eine Leiste zu sehen sein, mit der man schnell per Klick zum Gewinnspiel kommt.
Links im DIV soll ein Bild von einem Luftballon zu sehen sein, der dann sozusagen über dem DIV "schwebt"; also die Styles des DIVs nicht übernimmt, sondern transparent einfach darüber liegt.
Ich habe jetzt folgenden Codepen: https://codepen.io/gooloonetwork/pen/KKvXoMO
Aber irgendwie sieht man das Bild nicht. Hat jemand einen Tipp, wie ich es hinbekomme, dass das Bild zu sehen bleibt (und vielleicht auch eine Idee, wie sich Bild und Text nicht beißen, also der Text aus dem ersten DIV nicht aus Versehen in den Hintergrund des Bilds schwappen)?
3 Antworten
Das umschließende Eltern-Element (Parent-Selector) wurde bereits mit der fixen Positionierung aus dem normalen Dokumentenfluss herausgenommen.
Dem Kind-Element (Child-Selector) muss also lediglich ein absolute Positionierung zugewiesen werden. Durch einen negativen Positionswert (top: - value) wird das Kind-Element selbst dann aus dem umschließenden Eltern-Element rausgeschoben.
HTML:
<div class="givaway d-flex">
<img class="givaway__img" src="path/balloon.webp" alt="" />
<div class="container">
<!-- content comes here... -->
</div>
</div>
CSS:
.givaway {
width: 100%;
min-height: 5rem;
position: fixed;
bottom: 0;
}
.givaway__img {
width: 6.25rem;
position: absolute;
left: 0.9375rem;
top: -2.1875rem;
}
/* helper classes */
.d-flex {
display: flex;
justify-content: center;
align-items: center;
}
.container {
width: 100%;
max-width: 75em;
margin: 0 auto;
}
Wenn die Grafik nicht über den Inhalt laufen soll, entweder ein margin verwenden, mit z-index arbeiten oder die Elemente anderweitig anordnen.
LG medmonk
transparenz innerhalb eines bereichs bekommst du nicht weg . das liegt an der rendermaschine .
Mach mal overflow-x: hidden weg
Das nicht dein ernst :D Jo hat geklappt :D Oh man, mit einigen CSS Befehlen komme ich noch nicht ganz klar :D Danke dir!!