Within the jQueryUI dialog, I have gray boxes at the top and bottom of the visible area represented by the .nav elements. I want these gray boxes to stay fixed in their position even when scrolling within the dialog. Despite setting position: absolute, the gray boxes still scroll with the content. How can I achieve a fixed position for them inside the dialog?
$(document).ready(function() {
var opts = {
modal: true,
height:300,
};
$('#wrapper').dialog(opts);
$('#wrapper').dialog('open');
});.images {
z-index: 1;
}
.image {
display: inline-block;
border: 1px solid black;
width: 100%;
height: 500px;
}
.nav {
width: 90%;
height: 30px;
z-index: 2;
background-color: rgba(192, 192, 192, 0.7);
position: absolute;
}
.top {
top: 0px;
}
.bottom {
bottom: 0px;
}<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<div id='wrapper'>
<div class='top nav'>
</div>
<div class='bottom nav'>
</div>
<div class='images'>
<div class='image'>
</div>
<div class='image'>
</div>
<div class='image'>
</div>
</div>
</div>