CSS Div Позиционирование после Absolute Div

Question

Каков наилучший способ возобновить поток страницы в css.

Вот моя ситуация:

У меня есть 3 див Div 1 (родитель), отд 1 (дети), и Div 2 (нормальный). parent 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/