在 jQueryUI 对话框可见区域的顶部和底部,我有 div,由灰色框表示,代码段中的 .nav
元素,我希望它们保持固定在对话框中滚动时的位置。我为灰色框设置了 position: absolute
,但它们仍然与对话框中的其余内容一起滚动。如何将它们保持在对话框中的固定位置?
$(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>
最佳答案
将以下内联样式添加到您的包装器并调整top以正确定位顶部导航:
<div id='wrapper' style='position: static;'>
和:
.top {
top: 45px;
}
$(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: 45px;
}
.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' style='position: static'>
<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>
关于javascript - 将 div 保持在对话框中的固定位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38515339/