绝对分区后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/