CSS position:fixed inside a positioned element

html css stylesheet positioning
Calmarius picture Calmarius · Feb 10, 2011 · Viewed 138.7k times · Source

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.

Answer

Sotiris picture Sotiris · Feb 10, 2011

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

Related questions

How can I make a TextArea 100% width without overflowing when padding is present in CSS?

I have the following CSS and HTML snippet being rendered. Is the problem is that the text area ends up being 8px wider (2px for border + 6px for padding) than the parent. Is there a way to continue to use …

Read More
Margin while printing html page

I am using a separate style-sheet for printing. Is it possible to set right and left margin in the style-sheet which set the print margin (i.e. margin on paper). Thanks.

Read More
HTML not loading CSS file

I am completely stumped as to why this doesn't work. It seems the HTML file can't load the CSS for some reason, even though both are in the same directory. Any idea what might be the problem? index.html <!…

Read More