絶対divの後のCSS divの位置付け

Question

CSSでページのフローを再開するための最良の方法は何ですか？私は3つのdiv要素のdiv 1（親）、DIV 1（子）、およびディビジョン2（ノーマル）を持っている

：

は、ここに私の状況です。親divは絶対、子は相対です。これまでのところすべてが良いです。私が抱えている問題は、次の通常divが絶対divと同じ行にシフトされていることです（親divを絶対に設定しているページのフローを中断したため）。

私の質問はどのように絶対の位置を持つdivの下に普通のdivを置くのですか？私はmargin-topプロパティをオフセットするだけですか？

ありがとうございました！

を見てみましょう：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/