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

Question

就在昨天，我为我设计的新配置文件页面创建了一个计划。该计划将在下面显示。基本上我想知道如何获取配置文件图片图像浮动上方的封面照片和div #background。我想知道的两种方法的唯一方法是：#profile_pic {z-index:1500; }或#profile_pic {position:absolute;}。如果任何这些将工作，我怎么能浮动他们之间的两个divs。三江源

的个人资料页的计划：

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组合...或者你可以使用相对定位它的高度降低的轮廓PIC一半转移。

#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;  
}