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

Vom Fragesteller als hilfreich ausgezeichnet

medmonk

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, IT

01.11.2021, 10:28

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

Woher ich das weiß:Berufserfahrung – UI/UX Designer, Full-Stack Developer

TechPech1984

Nutzer, der sehr aktiv auf gutefrage ist

im Thema Computer

31.10.2021, 23:15

transparenz innerhalb eines bereichs bekommst du nicht weg . das liegt an der rendermaschine .

GuteAntwort555

31.10.2021, 22:55

Mach mal overflow-x: hidden weg

twforum

Fragesteller

31.10.2021, 23:15

Das nicht dein ernst :D Jo hat geklappt :D Oh man, mit einigen CSS Befehlen komme ich noch nicht ganz klar :D Danke dir!!

Ähnliche Fragen

Divs in Css nicht überlappen?

Hallo leute, wie schafft man es das sich in html/css 2 divs nicht überlappen können und auch z.b kein text dahinter kann damit auf smartphones textumbrüche gemacht werden und nicht 3 divs ineinander sind sondern alle 3 untereinander aufgelistet sind LG

...zur Frage

Mehrere Divs nebeneinander ohne Überlappen (HTML)

Hallo Zusammen

Ich würde gerne in meiner Webseite ein Div mit einem Inhalt links der Seite, sowie der Hauptinhalt in einem anderen Div rechts der Seite anzeigen lassen.

Das habe ich soweit auch hingekriegt. Jetzt kommt das Problem:

Bei Verkleinerung des Browserfensters überlappen sich die einzelnen Divs und ich möchte fragen wie man diese dazu zwingt sich nebeneinander einzureihen...

Freue mich auf Ratschläge,

Liebe Grüsse

...zur Frage

HTML/CSS: Floats überlappen sich beim Minimieren, wie behebt man das?

Hallo,

ich bin dabei eine kleine Website zu erstellen. (Nicht online) Dabei habe ich mit dem Responsive Webdesign Probleme. Auf dem Smartphone, Tablet, Pc sieht die Seite gut aus. Jedoch, wenn ich das Browser-Fenster kleiner verschiebe, überlappen sich Bilder mit dem Text an einer Stelle. (Der Text ist speziell in Lists unterteilt.)

Hat mir jemand einen Rat? Die Bilder sind in Div-Boxen, der CSS Code dafür sieht ungefähr so aus:

    vertical-align: top;
    margin-right: xy
    margin-top: xy
    float: right;
    width: auto;

...zur Frage

HTML und CSS Frage?

Hallo,

ich möchte die Grüne und gelbe Kärtchen im zweiten <section> nach oben in die MITTE schieben. Jedoch hakt es bisschen bei mir. Zudem müssen wir nur Flexbox benutzen das heisst kein margin oder position etc....

HTML_CODE:

<!DOCTYPE html>

<head>

<title>Flexbox</title>

</head>

<body>

<nav>

<ul>

<li>

<a class="item2" href="#">Button</a>

</li>

</ul>

</div>

</nav>

</div>

</header>

<main>

</div>

</section>

</div>

</section>

</div>

</main>

</body>

</html>

CSS_CODE:

margin: 0;

box-sizing: border-box;

}

header {

background-color: #cae1fc;;

}

.layout2 {

display: flex;

align-items: center;

justify-content: space-around;

flex-direction: column;

}

.container {

height: 150px;

width: 1425px;

background-color:rgb(80, 98, 104);

display: flex;

justify-content: space-around;

align-items: center;

}

div ul {

width: 100%;

}

div li {

display: flex;

justify-content: space-around;

align-items:center;

list-style: none;

}

.item {

background-color: rgb(39, 185, 171);

width: 120px;

height: 50px;

color: #fff;

font-weight: bold;

font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;

font-size: large;

display: flex;

justify-content: center;

flex-direction: column;

text-align: center;

text-decoration: none;

}

.item1 {

background-color: rgb(193, 67, 67);

width: 115px;

height: 50px;

color: #fff;

font-weight: bold;

font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;

font-size: large;

display: flex;

justify-content: center;

flex-direction: column;

text-align: center;

text-decoration: none;

}

.item2 {

background-color: rgb(112, 29, 189);

width: 80px;

height: 90px;

color: #fff;

font-weight: bold;

font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;

font-size: small;

display: flex;

text-align: center;

justify-content: center;

flex-direction: column;

text-decoration: none;

}

.layout2 > nav {

height: 100vh;

}

nav {

display: flex;

align-items: flex-end;

max-height: 170px;

}

/**/

.layout4 {

background-color: #cae1fc;

}

.laayout2 {

height: 1000px;

display: flex;

justify-content:space-around;

}

.sectionone {

display: flex;

justify-content: center;

align-items: flex-end;

max-height: 345px;

width: 270px;

}

.content1 {

display: flex;

flex-direction: column;

align-items: flex-end;

gap: 20px;

background-color: #cae1fc;;

}

.border {

background-color: #fff;

width: 225px;

height: 45px;

}

.border1 {

background-color: #fff;

width: 225px;

height: 45px;

}

.border2 {

background-color: #fff;

width: 225px;

height: 45px;

}

.border3 {

background-color: #fff;

width: 225px;

height: 45px;

}

.border4 {

background-color: #fff;

width: 225px;

height: 45px;

}

.brownhelp {

display: flex;

align-items: flex-end;

justify-content: center;

max-height: 345px;

width: 1200px;

}

.brownbox {

background-color: burlywood;

width: 1150px;

height: 305px;

}

/*YELLOW*/

.laayout3 {

display: flex;

justify-content: space-around;

align-items: flex-start;

height: auto;

}

.sectiontwo {

display: flex;

width: 800px;

justify-content: space-around;

align-items: center;

}

.content2 {

display: flex;

justify-content: space-around;

gap: 200px;

}

.box {

background-color: yellow;

width: 200px;

height: 190px;

}

.box2 {

background-color: green;

width: 200px;

height: 190px;

}

.box3 {

background-color: yellow;

width: 200px;

height: 190px;

}

.box4 {

background-color: green;

width: 200px;

height: 190px;

}

...zur Frage

Html Div höhe?

Ich habe 2 Divs mit dem Style .text{ float: left;} nebeneinander der erste hat 2 Zeilen Text, der zweite hat 5 Zeilen Text. Das hat zur Folge, das der erste eine höhe von 2 Zeilen, der zweite eine Höhe von 5 Zeilen hat. Nun möchte ich, dass sich die höhe vom ersten automatisch an die höhe des zweiten anpasst (egal wie viel Zeilen der zweite hat z.B. 10, 12, usw.).

...zur Frage

Verschachtelte DIV-Container in einer Reihe?

Ich versuche dieses Beispiel wie unten im Bild zu schaffen.

...zur Frage

HTML FLEX: Wie bekomme ich ein Label in einem Radiobutton zentriert?

https://jsfiddle.net/dtqjp3zr/

Die Labels sind Teil der Divs und haben 50% Breite. Für das Div klappt das auch, nur der Label-Text selbst will einfach nicht in die Mitte.
Wo ist da mein Denkfehler?

...zur Frage

Positionierung von Pfeilen in Flexboxen?

Hallo,

ich wollte bei meiner Website eine kleine Slideshow einbauen. Dazu habe ich erst einmal Pfeile erstellt. Diese wollte ich nun richtig positionieren. Ich hatte die Idee, eine Flexbox um die Bilder mit den Pfeilen zu erstellen und die Pfeile dann einfach mit align-items zu positionieren. Irgendetwas habe ich allerdings falsch gemacht. Vielleicht fällt euch ja mein Fehler auf. Bin für jeden Tipp dankbar.

html:

<div class="slide">
            <div id="footer2">
                <div id="bilder">
                    <div id="flexbox">
                        <div class="post">
                            <img src="wohnzimmer.png" alt="Wohnzimmer">
                            <div class="post-s">
                                <h2>Einbaumöbel</h2>
                            </div>
                        </div>
                        <div class="post1">
                            <img src="badezimmer.png" alt="Badezimmer">
                            <div class="post1-s">
                                <h2>Badmöbel</h2>
                            </div>
                        </div>
                        <div class="post2">    
                            <img src="einbauschränke.png" alt="Einbauschränke">
                            <div class="post2-s">
                                <h2>Einbauschränke</h2>
                            </div>
                        </div>
                    </div>
                    <div class="post3">
                        <img src="hochbett.png" alt="Hochbett">
                        <div class="post3-s">
                            <h2>Kinderhochbetten in Eichemassivholz</h2>
                        </div>
                    </div>
    
                    </div> 
                    
                </div>
                <a class="pfeil pfeil-links"><span>&#10094;</span></a>
                <a class="pfeil pfeil-rechts"><span>&#10095;</span></a>
            </div> 
        </div>

Css:

.slide{
    display: flex;
    border: solid black;
}
.pfeil {
    position: absolute;
    top: 0px;
    bottom: 0px;
    font-size: 50px;
    font-weight: bold;
    display: flex;
    align-items: center;
    
}
.pfeil-links {
    left: 0;
}
.pfeil-rechts {
    right: 0;
}

...zur Frage

text-align:center; funktioniert nicht?

Ich versuche schon seit geraumer Zeit dieses Problem zu lösen, doch ich komme einfach nicht dahinter, vielleicht kann mir hier jemand netterweise bei meinem Problem weiterhelfen.

<!DOCTYPE html>                             
<style>
  body{
    font-family: Georgia, 'Times New Roman', Times, serif;
  }
  
 #top{
  text-align: center;
 } 
  
 #logo{
    color:rgb(255, 255, 255);
    background-color: crimson;
    display: inline-flex;
    font-size: 32px;
    font-weight: bold;
    padding: 8px;
    margin-top: 16px;
  }
  #logo-name {
font-size: 32px;
font-weight: bold;
margin: 16px;
text-align: center;
  }
</style>
<html>
  <head>
<title> Homepage </title>
  </head>
<body>
  <div id="top"></div>
  <div id="logo">OH</div>
  <div id="logo-name">Homepage</div>
  <div id="main"></div>
  <div id="footer"></div>
</body>
</html>

...zur Frage

Navigationsleiste auf andere html?

Hallo, ich bin ziemlich neu was Websides programmieren angeht und ich finde kein gutes tutorial dazu, wie man wenn man eine Navigationsleiste hat z.b auf Getränke klickt und dann eine andere html/css Seite mit Getränken auftaucht etc.

versuche da auxh bisschen JavaScript mit rein zubringen d.h Benutze die Navigationsleiste von Material Design Lite.

Bin da bisschen überfragt und habe keine ahnung😅

<!-- Always shows a header, even in smaller screens. -->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
  <header class="mdl-layout__header">
    <div class="mdl-layout__header-row">
      <!-- Title -->
      <span class="mdl-layout-title">Title</span>
      <!-- Add spacer, to align navigation to the right -->
      <div class="mdl-layout-spacer"></div>
      <!-- Navigation. We hide it in small screens. -->
      <nav class="mdl-navigation mdl-layout--large-screen-only">
        <a class="mdl-navigation__link" href="">Link</a>
        <a class="mdl-navigation__link" href="">Link</a>
        <a class="mdl-navigation__link" href="">Link</a>
        <a class="mdl-navigation__link" href="">Link</a>
      </nav>
    </div>
  </header>
  <div class="mdl-layout__drawer">
    <span class="mdl-layout-title">Title</span>
    <nav class="mdl-navigation">
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
    </nav>
  </div>
  <main class="mdl-layout__content">
    <div class="page-content"><!-- Your content goes here --></div>
  </main>
</div>

...zur Frage

Buttons in einem div in einem a-Tag ansprechen?

Ich habe das Problem das ich ein "div" habe, das in einem ist, also selber als Verlinkung dient. In diesem "div" habe ich jedoch noch drei Buttons, die dann nicht mehr ansprechbar sind, da das ganze "div" ja ein Hyperlink ist. Ich möchte also das ich wenn ich auf einen der Buttons klicke, eine separate Aktion erfolgt und wenn ich nur in das "div" klicke ohne einen Button zu betätigen eine andere Aktion erfolgt. Damit ihr es ein bisschen besser versteht hänge ich noch einen Screenshot von der Situation an, hoffe man versteht es einigermaßen.

...zur Frage

HTML Email Style wird nicht richtig gerendert?

Folgender Code:

<html>
    <body>
        <div style="font-family: arial;">
            <h1 style="color: #007bff; letter-spacing: 2px; font-weight: 500;">Neue Nachicht von der Website!</h1>
            <div>
                <h2 style="margin-top: 2rem; margin-bottom: .5rem; letter-spacing: 2px; font-weight: 500;">Kontaktdaten</h2>
                <div style="margin-right: 70px; display: inline-block;">
                    <p style="margin: .6rem 0;">Vorname:</p>
                    <p style="margin: .6rem 0;">Nachanme:</p>
                    <p style="margin: .6rem 0;">Email Adresse:</p>
                    <p style="margin: .6rem 0;">Telefonnummer:</p>
                </div>
                <div style="display: inline-block;">
                    <p style="margin: .6rem 0;">${ firstname }</p>
                    <p style="margin: .6rem 0;">${ lastname }</p>
                    <p style="margin: .6rem 0;"><a style="color: #007bff; text-decoration: none;" href="mailto:${ email }">${ email }</a></p>
                    <p style="margin: .6rem 0;">${ htmlPhone }</a></p>
                </div>
            </div>
            <div>
                <h2 style="margin-top: 3rem; margin-bottom: 1rem; letter-spacing: 2px; font-weight: 500;">${ subject }</h2>
                <div style="font-size: 17px; padding-right: 11%; max-width: 900px;">${ message }</div>
            </div>
        </div>
    </body>
</html>

Eigentlich sollten bei den Kontaktdaten 2 Divs nebeneinander sein. Funktioniert auch wenn ich die Email über gmail.com aufrufe. Aber nicht in Windows Mail etc. Woran liegt das?

...zur Frage

Scrolling Effekt nur mit CSS, ohne JavaScript?

Wie bekomme ich diesen Parallax Scrolling Effekt

https://www.youtube.com/watch?v=TawH-AqHTXc

Meine Umsetzung: https://codepen.io/MrAmazing2/pen/dyMByNr

mit purem CSS hin??

Denn die JavaScript Version ist oft sehr ruckelig, da JS Asynchron läuft. Mit purem CSS wäre es aber immer flüssig. (Quelle)

Ich bin bereits auf das hier gestoßen: https://keithclark.co.uk/articles/pure-css-parallax-websites/demo3/

Jedoch schaffe ich es nicht, das ganze in ein Div zu packen, und darunter weitere Divs/Sections zu plazieren, sodass es aussieht wie in meiner Demo. Stattdessen überlappt es sich, oder der Parallax-Part bekommt eine extra Scrollbar.

Sitze nun schon seit 15 Stunden daran und schaffe es einfach nicht. Bin aber auch CSS Neuling.

...zur Frage

Was ist eigentlich das div genau in html?

Wenn ich zum Beispiel 4 div Container im Code habe, ist der erste div Container dann ganz oben und der letzte div Container ganz unten?

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen