认沽警报

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" × 
      = 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" × 
      = 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

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

添加到你的CSS

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

在上面的CSS的top属性定义从屏幕顶部有多远将这个div被添加。因此，如果您希望将这些警报显示在标题下方，则需要将其设置为与标题高度相同的值（高度+底部边距，如果有的话）。

Answer 2

尝试增加的绝对定位你有每个闪光警报元素，即

position: absolute; 

在你的CSS文件

。