Here is the code from my _notices.html.erb file:
<% 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 %>
The corresponding CSS for this code snippet is as follows:
#inner-message {
margin: 0 auto;
}
.alert-messages {
position: fixed;
top: 20px;
left: 0;
right: 0;
z-index: 7000;
}
However, once the alert is active on the screen, the elements behind the .alert-messages div become unclickable, as shown in the screenshot below.
https://i.sstatic.net/VwcGe.png
I'm looking for a solution to make my Bootstrap alert div float above all other elements on the screen without blocking them or making them unclickable. How can I achieve this without pushing everything else down?
Edit 1
Based on the suggestion by @symphonic, this is the updated result.