製作一個div「重疊」 div容器

Question

我試圖做一個頁面與此類似：

我試圖使資料圖片格去「下面的」壁紙股利。這裏是我的relavent代碼：

CSS代碼：

.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代碼：

<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 1

目前您的代碼不包含任何positioning樣式。

您很可能想要使用position: absolute作爲配置文件圖片（使用bottom和left屬性設置位置）。當你這樣做時，你還需要在壁紙中添加position: relative，以便絕對定位與壁紙相關。

下面是修改後的代碼，這將讓你在正確的方向前進：

.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") 
} 

要了解更多關於爲什麼你想要的壁紙設置爲position: relative以及如何工作，看看這篇文章：https://css-tricks.com/absolute-positioning-inside-relative-positioning/

Answer 2

一個可能的解決方案是定位你的元素。

隨着position:relative;在您的容器中（.wallpaper），您可以將您的個人資料圖片相對於容器放置在絕對位置，因此您可以將其推到您需要的確切位置。

.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

除了其他的答案，您可以通過使用z-index風格把「下面」壁紙的資料圖片。添加以下各類風格：

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