絕對分區後CSS div的定位

Question

什麼是我恢復在CSS中的頁面流的最佳途徑。

這裏是我的情況：

我有3個div的DIV 1（父），DIV 1（子），和2區（正常）。父母是絕對的，孩子是相對的。到目前爲止，一切都很好。我遇到的問題是下一個正常的div被轉移到與絕對div相同的行（因爲我打亂了頁面設置父div的絕對流量）。

所以我的問題是如何把正常的div下的div的絕對位置。我只是抵消了保證金最高的財產？

感謝您的幫助！

請看：https://jsfiddle.net/veLgmdt1/

Answer 1

http://jsfiddle.net/veLgmdt1/6

簡體HTML結構通過行和列浮動。這將消除對邊距和絕對定位的需求。

<div class="content-wrapper"> 
    <div class="row"> 
     <div class="col col-lg-3"> 
      <img src="http://lorempixel.com/230/230/" class="img-rounded"> 
      <button class="btn btn-primary">Invite To Project</button> 
      <ul class="list-unstyled"> 
       <li>Member Since: July 21, 2016</li> 
       <li>Toronto, ON</li> 
       <li> 
        <ul class="list-inline"> 
         <li>Social:</li> 
         <li><a href=""><i class="fa fa-facebook"></i></a></li> 
         <li><a href=""><i class="fa fa-twitter"></i></a></li> 
         <li><a href=""><i class="fa fa-pinterest"></i></a></li> 
         <li><a href=""><i class="fa fa-google-plus"></i></a></li> 
         <li><a href=""><i class="fa fa-youtube"></i></a></li> 
        </ul> 

       </li> 

      </ul> 
     </div> 
     <div class="col col-lg-9"> 
      <h2 class="profile-name">John Doe</h2> 
      <h4 class="">Graphic Designer</h4> 
      <p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula. 

       Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. 

       Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p> 
     </div> 
    </div> 
    <div class="row"> 
     <ul class="nav nav-pills" role="tablist"> 
      <li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li> 
      <li role="presentation"><a href="#">Profile</a></li> 
      <li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li> 
     </ul> 
    </div> 
</div> 

CSS

.content-wrapper { 
    width: 1000px; 
    margin: 0 auto; 
} 

.row { 
    width: 100%; 
    padding-top: 20px; 
} 

.row:nth-child(odd) { 
    background-color: #f5f5f5; 
    border-bottom: 1px solid #DDDDDD; 
    border-top: 1px solid #DDDDDD; 
} 

.col { 
    float: left; 
} 

.col-lg-3 { 
    width: 25% 
} 

.col-lg-9 { 
    width: 75% 
} 

.profile-heading { 
    margin-top: 50px; 
    background-color: #f5f5f5; 
    border-bottom: 1px solid #DDDDDD; 
    border-top: 1px solid #DDDDDD; 
} 

.profile-heading > .panel { 
    position: relative; 
    background-color: inherit; 
    margin: 0 auto; 
    width: 1000px; 
    border: none; 
} 

Answer 2

如果知道絕對定位的元素的height，它會很容易。只需添加等於已知高度的padding/margin或placeholder div即可。

如果高度是動態的，則必須求助於jQuery/JavaScript。

看一看我的演示足見其默認行爲和方法中提到：

// get the absolute-positioned element 
 
var abs = $("#dynamic .absolute"); 
 

 
// get height of absolute-positioned element 
 
var absHeight = abs.height(); 
 

 
// insert placeholder div with height equal to absolute-positioned element 
 
$("<div class='placeholder'></div>").height(absHeight).insertAfter(abs);

section { 
 
    position: relative; 
 
    padding: 1em; 
 
    margin: 1em; 
 
    border: 1px solid #CCC; 
 
} 
 

 
section div { 
 
    border: 1px dashed blue; 
 
} 
 

 
.absolute { 
 
    position: absolute; 
 
    top: 0; z-index: 1; 
 
    border:1px solid red; 
 
    height:50px; 
 
} 
 

 
#margin .absolute+div { 
 
    margin-top:50px; 
 
} 
 

 
#padding .absolute+div { 
 
    margin-top:50px; 
 
} 
 

 
.placeholder { height:50px; border:none } 
 

 
#dynamic .absolute { 
 
    height:100px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<h3>Default Behaviour</h3> 
 
<section> 
 
    <div class="absolute">position:absolute</div> 
 
    <div>normal div</div> 
 
</section> 
 

 
<h3>Known height: top margin</h3> 
 
<section id="margin"> 
 
    <div class="absolute">position:absolute</div> 
 
    <div>normal div with margin-top</div> 
 
</section> 
 

 
<h3>Known height: top padding</h3> 
 
<section id="padding"> 
 
    <div class="absolute">position:absolute</div> 
 
    <div>normal div with padding-top</div> 
 
</section> 
 

 
<h3>Known height: placeholder div</h3> 
 
<section> 
 
    <div class="absolute">position:absolute</div> 
 
    <div class="placeholder"></div> 
 
    <div>normal div</div> 
 
</section> 
 

 
<h3>Dynamic height: JavaScript/jQuery</h3> 
 
<section id="dynamic"> 
 
    <div class="absolute">position:absolute</div> 
 
    <div>normal div</div> 
 
</section>

的jsfiddle：https://jsfiddle.net/azizn/mq6bejhf/