Question

就在昨天，我为我的新个人资料页面设计了一个计划。该计划如下所示。基本上我想知道如何让个人资料图片图像漂浮在封面照片和div #background之上。我唯一知道的方式有：#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;    
 }

使用div制作Facebook风格的个人资料照片

3 个答案: