Question

我有两个div，第一个是横幅，第二个是带有卡片的包装：

<div class="banner" style="z-index:-1 ;background: url(<%= asset_path "bg#{num}.jpeg" %>;">
  <div class="banner-content">
    <%= link_to("Publier", new_post_path , :class => "btn btn-transparent btn-lg") %>
  </div>
</div>

<div style="background-color: #F4F4F4;">
    <div class="row">
      <div class="col-xs-12 col-sm-6 col-lg-4">
        <%= render "shared/card" %>
      </div>
      <div class="col-xs-12 col-sm-6 col-lg-4">
        <%= render "shared/card" %>
      </div>
      <div class="col-xs-12 col-sm-6 col-lg-4">
        <%= render "shared/card" %>
      </div>
      <div class="col-xs-12 col-sm-6 col-lg-4">
        <%= render "shared/card" %>
      </div>
      <div class="col-xs-12 col-sm-6 col-lg-4">
        <%= render "shared/card" %>
      </div>
    </div>
</div>

我添加的唯一CSS是：

.banner {
  position: absolute;
  top:0;
  left:0;
  right:0;
  z-index:0;
  color: white;
  text-align: center;
  height: 100vh;
  background-size: cover !important;
}

它们重叠。它们不应该一个在另一个下面显示吗？他们为什么在这里重叠？

Answer 1

您已为第一个absolute定位div。从横幅中删除position:absolute;。

为什么不相关的div在不在公共div中时会重叠？

1 个答案: