Как сделать так, чтобы выдвигающаяся вниз панель не сдвигала вниз div под собой?

Question

[Данил Закаблуковский]

Здравствуйте, не очень силен в верстке и понимании css. Столкнулся с проблемой, гугление не помогло (или я просто не угадал верного запроса).
Есть два div'а class=row - строки, в которых находятся div'ы class=post с постами: https://www.monosnap.com/image/mROJ1th5kUGX84O0mD9... .
Примерно так:

<div class="row">
  <div class="post"></div>
  <div class="post"></div>
  <div class="post"></div>
</div>
<div class="row">
  <div class="post"></div>
  <div class="post"></div>
  <div class="post"></div>
</div>

.row { margin-bottom: 40px; }
При наведении на блок с постом у него выдвигается снизу панелька: https://www.monosnap.com/image/XydphjeJS9p5H5IXVj5... , которая сдвигает нижнюю строку с блоками на высоту этой самой панельки (на скринах понятнее).

<div class="row">
  <div class="post"></div>
  <div class="post"></div> <!-- если навести на этот блок, то выдвигается панелька вниз... -->
  <div class="post"></div>
</div>
<div class="row"> <!-- ...которая сдвигает этот блок на свою высоту 
(к примеру панелька = 40px, то и сдвигает всю строку вниз тоже на 40px -->
  <div class="post"></div>
  <div class="post"></div>
  <div class="post"></div>
</div>

Помогите, пожалуйста, сделать так, чтобы эта выдвигающаяся вниз панелька не сдвигала вниз div под собой. Понимаю, что надо как-то запретить влияние других блоков на div'ы class=row, но моих знаний не хватает, к сожалению.

Answer 1

[PaulZi]

Сделайте .post { position: relative; }, а "сдвигаемую часть" { position: absolute; }

Comments

[Данил Закаблуковский]

Спасибо, получилось

Answer 2

[bezymenka]

Думаю, не совсем так.
Чтобы использовать позиционирование, надо эти оба блока обернуть в блок со стилем position: relative;
Блок который не должен двигаться надо поставить на нужное место абсолютным позиционированием.
А второму задать position: relative;

как то так

<div class="wrapper" style="position: relative;">
    <div class="row" style="position: absolute;  bottom: 0; ">
       <div class="post"></div>
       <div class="post"></div>
      <div class="post"></div>
  </div>

  <div class="row" style="position: relative;"> 
      <div class="post"></div>
      <div class="post"></div>
      <div class="post"></div>
   </div>
</div>

Comments

[Данил Закаблуковский]

Такое решение не подойдет, поскольку это строки с постами, каждая содержит в себе несколько блоков с постами, у которых есть такая панель

Answer 3

[Krickt]

Для row - position: relative;
Для выдвигающийся панели - position: absolute; bottom: 0;