I encountered a challenge while attempting to right-align multiple Bootstrap 3 containers in a straightforward manner. Despite my efforts, achieving this proved to be more complex than expected. In essence, I faced an issue where aligning the text box with the navbar's right border caused touch responsiveness problems due to z-index settings. After some exploration, I discovered that overlaying a container on top of a background without compromising interactivity was not feasible. Any suggestions on how to address this perplexing situation would be greatly appreciated. Thank you.
You can view the code here:
Bootply ##:this bootply
HTML
<div class="container myMapNavBar">
<nav class="navbar navbar-default" role="navigation">
This is the navbar
</nav>
</div>
<div class="container" id="myScrollBox">
This is a test box
</div>
Css
.myMapNavBar {
position: absolute;
left: 0; right: 0;
top: 15px;
z-index: 1;
}
#myScrollBox {
position: absolute;
top: 120px;
width: 380px;
right: 30px;
z-index: 1;
background-color: rgba(255, 255, 255);
border-radius: 5px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
}