Menu
I have a positioned div whose content can be too long so scrollbars appear (overflow:auto set). It functions as a dialog box in an ajax app. I want to fix a close button on it's right top corner so when the user scrolls the div it won't scroll away.
I tryed it with position:fixed; right:0; top:0 but it placed the button on the right top of the page not in the div (in firefox).
Is it possible to do this button placement using CSS only without hacking with the offsetWidth/Height in js on every scroll event?
ps: the div's height and width is not a fixed value it depends on the content's size and the browser window's size. User can also resize it if he want.
331
Set everything up as you would if you want to position: absolute inside a position: relative container, and then create a new fixed position div inside the div with position: absolute , but do not set its top and left properties. It will then be fixed wherever you want it, relative to the container.
The interesting rule here is the ' position: fixed ', that makes the DIV stay fixed on the screen. The ' top: 50% ' and ' right: 0 ' determine where the DIV is displayed, in this case: 50% down from the top of the window, and a constant 0px from the right.
Fixed positioning is really just a specialized form of absolute positioning; elements with fixed positioning are fixed relative to the viewport/browser window rather than the containing element; even if the page is scrolled, they stay in exactly the same position inside the browser window.
Fixed positioning This can be used to create a "floating" element that stays in the same position regardless of scrolling. In the example below, box "One" is fixed at 80 pixels from the top of the page and 10 pixels from the left.
You can use the position:fixed;, but without set left and top. Then you will push it to the right using margin-left, to position it in the right position you wish.
Check a demo here: http://jsbin.com/icili5
76
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
