認沽警報

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文件

。