Вытеснение с под absolute

288

03 июля 2017, 18:36

Есть блок (.a), в котором установлено position: absolute. Так же имеется и другой контент (.b).

Проблема в том, что блок .b залазит под блок .a.
Конечно, можно добавить ещё один блок (.c) под .a такой же высотой как и он. Но тут проблема: блок .a в течении всего времени может изменять свою высоту (изменение ширины, добавление контента, увеличение с помощью скрипта), а блок .c останется старого размера.

Пробовал добавлять к .a событие resize, при запуске которого изменяется с размер .c, но событие resize не работает на div'ах.

В общем, как сделать так, чтобы .b не залазил под .a, которые изменяет свой размер?

$('#a').click(function() { 
  $('.a').width( 200 ); 
}); 
$('#b').click(function() { 
  $('.a').append( '<div style="width: 120px; height: 20px;"></div>' ); 
}); 
$('#c').click(function() { 
  $('.a').height( $('.a').height() + 20 ); 
});

body { 
  margin: 0; 
} 
 
.a, .b, .c { 
  width: 100%; 
  min-height: 24px; 
} 
 
.a {background-color: red; position: absolute; top: 0px;} 
.b {background-color: blue;} 
.c {background-color: green;} 
 
.a div {display: inline-block;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="c"></div> 
<div class="a"><div style="width: 120px; height: 20px;"></div><div style="width: 120px; height: 20px;"></div></div> 
<div class="b"></div> 
 
<ul> 
  <li><b>События, из за которых может изменится размер:</b></li> 
  <li>Изменение ширины <button id="a">Применить</button></li> 
  <li>Добавление блока <button id="b">Применить</button></li> 
  <li>Изменение высоты <button id="c">Применить</button></li> 
</ul>

Answer 1

Создайте точно такой же элемент только добавьте ему position: static; и visibility: hidden; (что позволит занимать нужное место, но не отображать элемент).

.a, 
.b { 
  width: 100%; 
  height: 20px; 
} 
 
.a { 
  background: red; 
  position: absolute; 
} 
 
.b { 
  background: blue; 
} 
 
.a-clone { 
  position: static; 
}

<div class="a"></div> 
<div class="a a-clone"></div> 
<div class="b">Я не должен быть под красным блоком :с</div>

Те же вещи можно делать и с помощью Javascript и также задавать этому "клону" нужные margin при необходимости (для соответствующих значений top и left абсолютно позиционированного элемента).

Обновление

Если содержимое блока будет динамически меняться, то можно с помощью Javascript добавить обработчик изменения размеров самого блока, где присваивать новые значения размеров блока "клону" блока со статическим поционированием.

Answer 2

Есть вариант, если используете препроцессор LESS. Там есть возможность создавать переменную и совершать с ней математические операции, а возможность постоянно находиться под блоком с атрибутом absolute позволит padding-top. Смотрите ссылку на www.codepen.io - https://codepen.io/alexseveneight/pen/BZrRLw

Как бы ни изменилась высота блока .a, блок .b всегда будет ниже.