当我鼠标悬停在div上时，Div会远离div

Question

我正在运行Masonry和我所有的post container divs，当我将鼠标悬停在post div上时，我希望标题和标签出现。我试图在帖子顶部显示标题，并在帖子下方显示标签，当我将鼠标悬停在帖子上时，将其他帖子推到它周围。

当我将鼠标悬停在帖子上时，标题显示正确地将div推到它上方，但是底部div不会推开而是显示在它下方的帖子下面。

Example

<div id="content">
  <div class="post">
     <div class="title">Post Title</div>
     <div class="image2"></div>
     <div class="details">Post Details</div>
  </div>
  <div class="post">
    <div class="title">Post Title</div>
    <div class="image2"></div>
    <div class="details">Post Details</div>
  </div>
  <div class="post">
     <div class="title">Post Title</div>
     <div class="image1"></div>
     <div class="details">Post Details</div>
  </div>
  <div class="post">
    <div class="title">Post Title</div>
    <div class="image1"></div>
    <div class="details">Post Details</div>
  </div>
  <div class="post">
    <div class="title">Post Title</div>
    <div class="image1"></div>
    <div class="details">Post Details</div>
  </div>
  <div class="post">
    <div class="title">Post Title</div>
    <div class="image2"></div>
    <div class="details">Post Details</div>
  </div>
  <div class="post">
    <div class="title">Post Title</div>
    <div class="image2"></div>
    <div class="details">Post Details</div>
    </div>
  <div class="post">
    <div class="title">Post Title</div>
    <div class="image1"></div>
    <div class="details">Post Details</div>
  </div>
</div>

Answer 1

正如Jakub所说，定位是错误的。在你的例子中，我添加了

#content div{
        position: static !important;
    }

它纠正了这个问题。虽然这有效。它仍然没有你想要的功能。我建议建立一个新的容器div，在整个容器div中的div“square”上设置边距和填充，直到它按照需要工作。