使用divs制作Facebook风格的个人资料图片

Question

就在昨天，我为我正在设计的新个人资料页面创建了一个计划。 该计划如下所示。 基本上，我想知道如何使个人资料图片漂浮在封面照片和div #background上方。 我唯一知道的两种方法是： #profile_pic {z-index:1500; } #profile_pic {z-index:1500; }或#profile_pic {position:absolute;} 。 如果其中任何一个可行，我如何在两个div之间浮动它们。 谢谢

个人资料页面计划：

Answer 1

这是您想要的： http : //jsfiddle.net/hzJvQ/全屏： http : //jsfiddle.net/hzJvQ/embedded/result/

HTML：

<div class="main">
    <div class="cover">
        <img src="http://hdwallcomp.com/wp-content/uploads/2014/02/Fantasy-Landscape-Wallpaper-Full-HD.jpg" />
    </div>
    <div class="profile">
        <img src="http://malvorlagen-fensterbilder.de/bilder-bunt/Micky-Maus.jpg" />
    </div>
</div>

CSS：

.main {
    display:block;
    position:relative;
    width: 980px;
    margin: 0 auto;
}
.cover {
    display:block;
    position:relative;
    height:437px;
    overflow:hidden;
    z-index:1;
}
.cover img {
    max-width:100%;
    z-index:1;
}
.profile {
    display:block;
    position:relative;
    border:#d0efff solid 3px;
    border-radius:5px;
    width:200px;
    height:200px;
    margin: -100px 0 10px 20px;
    z-index:999;
}
.profile img {
    max-width:100%;
    z-index:999;
}

Answer 2

就像这样：

#profile_pic {
    height:250px;
    width:250px;
    position:absolute;
    top:350px;
    left:100px;
    z-index:10;
}

Answer 3

没有在2个div 之间浮动的“简单”或默认方法。 也就是说，您只需要计算个人资料图片的高度，然后相应地进行调整即可。

因此，您可以使用绝对定位 （结合了z-index和position:absolute ，如前所述……，也可以使用相对定位并将轮廓图片的高度降低一半。

 #profile_pic {
   position: absolute;
   height: 200px;  /* it looks like this is your height */
   width: 200px;   /* it looks like this is your height */
   top: 250px;     /* it looks like this is your distance from the top */
   left: 50px;     /* it looks like this is your distance from the left */
   z-index: 99; 
 }

或使用相对定位（注​​意：您必须将所有其他div包装在使用默认（静态）定位以外的内容的外部容器中，例如：

 #div_container {
   position: absolute;
   top: 0px;
   left: 0px;
   margin: 0;
   padding: 0;
 }  

 #profile_pic {
   position: relative;
   height: 200px;  /* it looks like this is your height */
   width: 200px;   /* it looks like this is your height */
   top: -100px;    /* shift the profile pic up half it's height */
   left: 50px;     /* it looks like this is your distance from the left  */
   z-index: 99; 
 }

 /* Now, shift the information div up 200px (the height of #profile_pic), 
 *  in order to align to the bottom of the "cover photo" div 
 */
 #information_section {
   position: relative;
   top: -100px;    
 }