ein div „überlappt“ div-Container machen

Question

Ich versuche, eine Seite ähnlich wie dies zu machen:

ich das Profilbild zu machen versuchen, die Tapete div div gehen „unten“. Hier ist mein relavent Code:

CSS-Code:

.profile-picture { 
    display: inline-block; 
    margin-left: 10px; 
    width: 150px; 
    height: 150px; 
    -ms-border-radius: 50%; 
    border-radius: 50%; 
    background-repeat: no-repeat; 
    background-position: center center; 
    -ms-background-size: cover; 
    background-size: cover; 
    background-image: url("../Images/profiles/default.png") 
} 

.wallpaper { 
    width: 100%; 
    -ms-background-size: cover; 
    background-size: cover; 
    background-image: url("../images/Wallpapers/default.png") 
} 

HTML-Code:

<div class="col-md-6 roundedCorners" style="background-color: white"> 
    <div class="wallpaper"> 
     <div class="row"> 
      <div class="col-md-6" style="text-align: left"> 
       <div class="profile-picture"> 
        &nbsp; 
       </div> 
      </div> 
      <div class="col-md-6"> 

      </div> 
     </div> 
    </div> 
</div> 

Gerade jetzt, alles funktioniert, außer seiner das abgerundete Profilbild setzen vertikal zentriert innerhalb das Bild. Ich möchte, dass es außerhalb der Tapete schwebt, wie im Bild oben gezeigt. Was vermisse ich?

Answer 1

Derzeit enthält Ihr Code keine positioning Stile.

Wahrscheinlich möchten Sie position: absolute für das Profilbild verwenden (mit einer bottom und left Eigenschaft, um die Position festzulegen). Wenn Sie dies tun, möchten Sie auch position: relative zum Hintergrund hinzufügen, so dass die absolute Positionierung in Bezug auf die Tapete ist.

Hier ist der modifizierte Code, das werden Sie in die richtige Richtung:

.profile-picture { 
    /* set the position to absolute */ 
    position: absolute; 
    /* set the bottom to be slightly outside the wallpaper boundary. Adjust this number as desired */ 
    bottom: -50px; 
    /* set the left where desired. Note I removed your margin-left, since you don't need both left and margin-left */ 
    left: 10px; 
    display: inline-block; 
    width: 150px; 
    height: 150px; 
    -ms-border-radius: 50%; 
    border-radius: 50%; 
    background-repeat: no-repeat; 
    background-position: center center; 
    -ms-background-size: cover; 
    background-size: cover; 
    background-image: url("../Images/profiles/default.png") 
} 

.wallpaper { 
    /* set the position to relative, so the profile picture position is in relationship to the wallpaper container */ 
    position: relative; 
    /* you may (or may not) need this. The profile is outside the wallpaper, so would be considered "overflow". */ 
    overflow: visible; 
    width: 100%; 
    -ms-background-size: cover; 
    background-size: cover; 
    background-image: url("../images/Wallpapers/default.png") 
} 

Um mehr über zu verstehen, warum Sie wollen, dass die Tapete auf position: relative und wie die, lesen Sie in diesem Artikel funktioniert: https://css-tricks.com/absolute-positioning-inside-relative-positioning/

Answer 2

Eine mögliche Lösung wäre, Ihre Elemente zu positionieren.

Mit position:relative; in Ihrem Container (.wallpaper) können Sie Ihr Profilbild absolut in Bezug auf den Container positionieren, so mit bottom: -70px; können Sie es auf die genaue Position drücken, die Sie benötigen.

.profile-picture { 
 
    position: absolute; 
 
    bottom: -70px; 
 
    display: inline-block; 
 
    margin-left: 10px; 
 
    width: 150px; 
 
    height: 150px; 
 
    -ms-border-radius: 50%; 
 
    border-radius: 50%; 
 
    border: 5px solid white; 
 
    background-repeat: no-repeat; 
 
    background-position: center center; 
 
    -ms-background-size: cover; 
 
    background-size: cover; 
 
    background-image: url(https://unsplash.it/150/150) 
 
} 
 
.wallpaper { 
 
    position: relative; 
 
    width: 100%; 
 
    height: 200px; 
 
    -ms-background-size: cover; 
 
    background-size: cover; 
 
    background-image: url(https://unsplash.it/2000/200) 
 
}

<div class="col-md-6 roundedCorners" style="background-color: white"> 
 
    <div class="wallpaper"> 
 
    <div class="row"> 
 
     <div class="col-md-6" style="text-align: left"> 
 
     <div class="profile-picture"> 
 
      &nbsp; 
 
     </div> 
 
     </div> 
 
     <div class="col-md-6"> 
 

 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 3

Zusätzlich zu den anderen Antworten, können Sie mithilfe des z-index Stil das Profilbild „unten“ die Tapete setzen. Fügen Sie jedem Klassenstil Folgendes hinzu:

.profile-picture { 
    z-index:4; 
} 
.wallpaper { 
    z-index:5; 
}