Question

在我的rails应用中，我的闪光警报无法正确显示：

我试图在我的警报类上放置一个z-index，但它不起作用。这是我在应用程序中组织代码的方式。我在布局中渲染警报：

  <%= render 'shared/navbar'%>
 <%= render 'shared/flashes' %>

<%= yield %>

</body>

这是我的html在闪光灯中显得很苗条：

- if notice
  div class="alert alert-info alert-dismissible" id="alert" role="alert"
    div class="container"
      div class="row"
        div class="col-xs-12"
          button type="button" class="close" data-dismiss="alert" aria-label="Close"
            span aria-hidden="true" &times;
          = notice.html_safe

- if alert
    div class="alert alert-warning alert-dismissible" id="alert" role="alert"
      div class="container"
        div class="row"
          div class="col-xs-12"
            button type="button" class="close" data-dismiss="alert" aria-label="Close"
              span aria-hidden="true" &times;
            = alert.html_safe

也许我也应该更改我的课程背景封面，它包含了我看到的主页？

.background-cover {
  background-position: center;
  background-image: linear-gradient(135deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.2) 50%), image-url("hands.jpg");
  background-size: cover;
  text-align: center;
  color: white;
  min-height: 661px;
}

这是我的主页html：

<div class="background-cover">
  <div class="row text-center quickbed">
    <h1 class="title">Quickbed</h1>
    <p class="punchline">Se sentir chez soi est un droit</p>
  </div>
  <div class="row options">
    <div class="col-sm-6">
      <div class="card card-block  text-center">
        <h3 class="card-title option-title ">Hotel d'hébergement social</h3>
        <p class="card-text">Par ici si vous souhaitez accueillir des réfugiés.</p>
        <%= link_to "S'inscrire", "#", class: "btn btn-success btn-lg js-subscription-form" %>
      </div>
    </div>
    <div class="col-sm-6">
      <div class="card card-block text-center">
        <h3 class="card-title option-title">Association volontaire</h3>
        <p class="card-text">Par ici si vous faites parti d'une association aidant les réfugiés à trouver un logement.</p>
        <%= link_to "S'inscrire", "#", class: "btn btn-success btn-lg js-subscription-form" %>
      </div>
    </div>
  </div>
</div>
  <div class="row" id="story">
    <h2 class= "text-center">Why Quickbed ?</h2>
    <h3 class="text-center"> For you Super helper</h3>
    <div class="col-xs-4 text-center">Find quickly a bed</div>
    <div class="col-xs-4 text-center">Find Cheapest price</div>
    <div class="col-xs-4 text-center">Manage your bills easily</div>
  </div>
  <div class="row">
   <h3 class="text-center"> For you nice host</h3>
    <div class="col-xs-4 text-center">Simplify your process</div>
    <div class="col-xs-4 text-center">Manage your team</div>
    <div class="col-xs-4 text-center">Optimise your space</div>
  </div>
  <div class="row" id="subscription_form">

    <h3 class="text-center">Soyez premier à tester !</h3>
    <div class="col-xs-offset-4 col-xs-4">
      <%= simple_form_for @user, url: users_path do |f| %>
        <%= f.error_notification %>
        <div class="form-group">
          <%= f.input :first_name, label: "Prénom", class: "form-control", placeholder: "Jean"%>
        </div>
        <div class="form-group">
          <%= f.input :last_name, label: "Nom", class: "form-control", placeholder: "Dupond" %>
        </div>
        <div class="form-group">
          <%= f.input :email, label: "Email", class: "form-control", placeholder: "dupond@gmail.com" %>
        </div>
        <div class="form-group">
          <%= f.input :organisation, label: "Organisation", class: "form-control", placeholder: "Samu Social" %>
        </div>
        <div class="form-group">
          <%= f.input :organisation_type, label: "Type d'Organisation", class: "form-control" %>
        </div>
        <div class="form-group">
          <%= f.submit "Valider", class: "btn large_btn btn-success" %>
        </div>
      <% end -%>
    </div>
  </div>
</div>

你能告诉我如何让警报出现在主要div之上并解释如何做到这一点。

Answer 1

尝试为您拥有的每个闪光警报元素添加绝对定位，即

position: absolute;

在CSS文件中。

Answer 2

如果你想要的只是警告div而不是推动其他div，你可能想要将position: absolute CSS属性添加到警报部门。

将此添加到您的CSS

.alert {
  position: absolute;
  top: 30px; // Should be same as the height of the header
  width: 100%;
}

上面CSS中的top属性定义了从屏幕顶部到这个div的添加距离。因此，如果您希望这些警报显示在标题下方，则需要使其与标题的高度（高度+底部边距，如果有）相同。

在主要div上面发出警报

2 个答案: