使用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;  
}