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

Question

我正在运行Masonry和所有我的帖子容器div，并且我希望将鼠标悬停在post div上时显示标题和标签。 我试图将标题显示在帖子上方，并将标签显示在帖子下方，并在将鼠标悬停在帖子上方时将其他帖子推到该帖子周围。

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

例

<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“正方形”上设置边距和内边距，直到按需工作为止。