Как сделать так, чтобы при отображении моего предупреждения Bootstrap элементы в моем Nav не блокировались?

Question

Итак, это мой _notices.html.erb:

<% flash.each do |msg_type, message| %>
<div class="row pt-6 alert-messages">
  <div class="col-lg-6 offset-lg-3">
      <div id="inner-message" class="alert <%= bootstrap_class_for(msg_type) %>">
        <div class="container">
          <button class="close" data-dismiss="alert"><span>×</span></button>
          <%= message %>
        </div>
      </div>
    </div>
  </div>
<% end %>

Это соответствующий CSS:

#inner-message {
  margin: 0 auto;
}

.alert-messages {
  position: fixed;
  top: 20px;
  left: 0;
  right: 0;
  z-index: 7000;
}

Однако, когда это предупреждение становится активным и отображается на экране, все элементы, стоящие за этим .alert-messages div, нельзя щелкнуть, как видно на скриншоте ниже.

So how do I get my Bootstrap alert div to float above all of the elements currently on screen without pushing everything else down (which the position: fixed and other attributes of .alert-messages does) without it blocking out the elements covered by the full .alert-messages div and making them unclickable?

Edit 1

Per @symphonic's answer below, this is the result.

результат симфонии c ответ

Answer 1

Измените это:

<div class="row pt-6 alert-messages">
 <div class="col-lg-6 offset-lg-3">
  <div id="inner-message" class="alert <%= bootstrap_class_for(msg_type) %>">
   <div class="container">
    <button class="close" data-dismiss="alert"><span>×</span></button>
     <%= message %>
    </div>
   </div>
 </div>
</div>

На это:

<div id="inner-message" class="alert-messages alert <%= bootstrap_class_for(msg_type) %>">
 <div class="container">
   <button class="close" data-dismiss="alert"><span>×</span></button>
   <%= message %>
 </div>
</div>

И используйте это css:

.alert-messages {
 position: fixed;
 top: 20px;
 z-index: 7000;
 left: 50%;
 transform: translateX(-50%);
}