javascript 将 DIV 固定在可滚动 DIV 中
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/6215883/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Make DIV fixed inside a scrollable DIV
提问by williamtroup
Does anyone now how to make a DIV inside another DIV that is scroll-able fixed, so that no matter how much I scroll by, the DIV always stays in the same place?
现在有没有人如何在另一个可滚动固定的 DIV 中制作 DIV,这样无论我滚动多少,DIV 始终保持在同一个位置?
Any help would be greatly appreciated.
任何帮助将不胜感激。
采纳答案by Fredrik
Try this out:
试试这个:
<style type="text/css">
.scrollable {
width: 200px;
height: 200px;
background: #333;
overflow: scroll;
}
.fixed {
position: absolute;
top: 180px;
width: 200px;
height: 20px;
background: #fa2;
}
</style>
<div class="scrollable">
im scrollable<br><br>
im scrollable<br><br>
im scrollable<br><br>
im scrollable<br><br>
im scrollable<br><br>
im scrollable<br><br>
<div class="fixed">and I'm fixed</div>
</div>
回答by zzzzBov
I would recommend absolutely positioning the div overthe scrollable div. It wont be inthe scrollable div, because it doesn't need to be.
我会建议在div绝对定位在滚动股利。它不会在可滚动的 div 中,因为它不需要。
回答by Mikulasche
Fixed div in scrollable div
修复了可滚动 div 中的 div
#container {
position:absolute;
top:150px;
left:150px;
width:600px;
height:500px;
overflow:hidden;
border:3px dashed #ffff00;
padding:0px;
}
#this_scroll {
position:absolute;
top:0px;
right:0px;
width:99%;
height:99%;
overflow:scroll;
border:2px solid #000;
margin:1px;
background:#B0BDCE;
}
#fix_close {
position:absolute;
top:2px;
right:21px;
width:90px;
height:30px;
overflow:hidden;
border:2px solid #660099;
z-index:10;
background:#8C8C8C;
}
<div id="container">
<div id="this_scroll">
<p>some yxyxyx</p><p>some yxyxyx</p>
</div>
<div id="fix_close">
close
</div>
</div>