無法使用所有的方法後得到div的期望溢出建議

Question

我想我的格對齊像下圖所示的....

但我得到這樣的事情.. ...

只有固定定位爲我工作...但我不希望使用....

這裏是我的html代碼...

<div class="profileHeader"> 
    <span class="img" style="background: url(http://localhost/Amar/public/assets/images/temp/restaurant.jpeg) #B3E5FC center center/cover no-repeat;"></span> 
    <span class="gradientBottom"></span> 
    <div class="col-lg-3"> 
     <div class="profilePicWrapper"> 
      <div class="profilePic"> 
       <img src="assets/images/temp/shop.jpg" alt="Alt here"/> 
      </div> 
     </div> 
    </div> 
</div> 
<div class="optionWrapper"></div> 

這裏是我的CSS代碼....

.profileHeader { 
height: 400px; 
position: relative; 
} 
.profileHeader .gradientBottom { 
left: 0; 
bottom: 0; 
width: 100%; 
height: 50%; 
position: absolute; 
background: -moz-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0) 20%,rgba(0,0,0,.5) 100%); 
background: -webkit-gradient(linear,left top,left bottom,color-stop(0,rgba(0,0,0,0)),color-stop(20%,rgba(0,0,0,.13)),color-stop(100%,rgba(0,0,0,.5))); 
background: -webkit-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0) 20%,rgba(0,0,0,.5) 100%); 
background: -o-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0) 20%,rgba(0,0,0,.5) 100%); 
background: -ms-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0) 20%,rgba(0,0,0,.5) 100%); 
background: linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,0) 20%,rgba(0,0,0,.5) 100%); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#a6000000', GradientType=0); 
} 
.profilePicWrapper { 
position: relative; 
width: 100%; 
height: 100%; 
z-index: 1; 
} 
.profilePic { 
width: 100%; 
padding: 5px; 
background-color: #fff; 
border: 1px solid #999; 
position: absolute; 
z-index: 10; 
margin-top: 200px; 
} 
.profilePic img { 
width: 100%; 
display: block; 
} 
.optionWrapper { 
width: 100%; 
height: 50px; 
background: #fff; 
text-align: center; 
position: relative; 
border-bottom: 1px solid #414042; 
} 

我無法弄清楚什麼錯誤......請幫助.. 。

Answer 1

使用原始的HTML（有一個變化，我把內聯CSS出）以及消除你想實現定位不相關的所有CSS：

.profileHeader{ 
 
    width: 570px; height: 210px; 
 
    position:relative; 
 
    background: url('http://placehold.it/570x210') #B3E5FC center center/cover no-repeat; 
 
} 
 

 
.profilePic { 
 
    border: 4px solid #FFF; 
 
    position:absolute; 
 
    right: 50px; 
 
    bottom: -80px; 
 
} 
 

 
.optionWrapper { 
 
    margin-right: 400px; /* leave room for profile pic */ 
 
    min-height: 80px; /* ensure profile pic doesn't overlap following content */ 
 
}

<p>This is content before the element</p> 
 
<div class="profileHeader"> 
 
    <span class="img" style=""></span> 
 
    <span class="gradientBottom"></span> 
 
    <div class="col-lg-3"> 
 
     <div class="profilePicWrapper"> 
 
      <div class="profilePic"> 
 
       <img src="http://placehold.it/280x210" alt="Alt here"/> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div> 
 
<div class="optionWrapper">This is the content of optionWrapper</div> 
 
<p>This is content after the element</p>

本質上，該容器設置成position: relative使得子元素.profilePic的絕對定位將是相對於它的尺寸;然後在子元素上使用負底部邊距來創建偏移定位。

這應該不會影響position:fixed會的方式對頁面其餘部分的佈局，因爲絕對定位只設置在您想浮動到其他元素之上的一個元素上。