Make the DIV locked inside the scrollable DIV

Question

Anyone now how to make a DIV inside another DIV that can be scrollable, so no matter how much I scroll, the DIV always stays in one place?

Any help would be greatly appreciated.

Answer 1

Try the following:

<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> 

Answer 2

I would recommend absolutely positioning the div over the scrollable div. It will not be in a scrollable div because it is not necessary.

Answer 3

Fixed div in scrollable 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>