CSS位置：固定在定位元素内 [英] CSS position:fixed inside a positioned element

问题描述

我有一个定位的div，其内容可能太长，所以滚动条出现（ overflow：auto set）。它在ajax应用程序中作为一个对话框。我想修正一个关闭按钮在它的右上角，所以当用户滚动div它不会滚动。

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.

我尝试使用位置：固定; right：0; top：0 ，但它将按钮放在页面右上角而不是div（在firefox中）。

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

在每个滚动事件上使用CSS只使用CSS而不使用js中的offsetWidth / Height？

Is it possible to do this button placement using CSS only without hacking with the offsetWidth/Height in js on every scroll event?

ps：div的高度和宽度不是固定值关于内容的大小和浏览器窗口的大小。

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.

推荐答案

您可以使用 position：fixed; code>，但没有设置左和顶部。然后，您将使用 margin-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.

在此处查看演示： http://jsbin.com/icili5

这篇关于CSS位置：固定在定位元素内的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！