制作一个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; 
}