CSS位置：固定在一个定位元素内
我有一个定位div的内容可能太长，所以出现滚动条（ overflow:auto设置）。 它在ajax应用程序中用作对话框。 我想修复右上angular的closuresbutton，所以当用户滚动div时不会滚动。
我尝试了它的position:fixed; right:0; top:0 position:fixed; right:0; top:0 position:fixed; right:0; top:0但它放置在页面右上方的button不在div（在Firefox中）。
是否有可能做这个button放置使用CSS只有在每个滚动事件js中的偏移量/高度的黑客攻击？
ps：div的高度和宽度不是固定值，它取决于内容的大小和浏览器窗口的大小。 用户也可以调整它，如果他想。
你可以使用这个position:fixed; ，但没有设置left和top 。 然后，您将使用margin-left将其向右推，以将其放置在您希望的正确位置。
在这里查看演示： http ： //jsbin.com/icili5
目前select的解决scheme似乎误解了这个问题。
诀窍是既不使用绝对定位也不使用固定定位。 相反，将div的外部closuresbutton的位置设置为相对的 ，左边的是浮动的，这样就可以直接在div的右边。 接下来，设置一个负的左边距和一个正Z指数，使其出现在div上方。
这是一个例子：
#close { position: relative; float: left; margin-top: 50vh; margin-left: -100px; z-index: 2; } #dialog { height: 100vh; width: 100vw; position: relative; overflow: scroll; float: left; } <body> <div id="dialog"> **** </div> <div id="close"> </div> </body>
Position:fixed给出关于BROWSER窗口的绝对位置。 所以它当然会去那里。
虽然position:absolute指的是父元素，所以如果你把你的<div>button放在容器的< div>内，它应该放在你想要的位置。 就像是
编辑：感谢@Sotiris，谁有一个点，解决scheme可以实现使用的位置：固定和余裕。 像这样： http : //jsfiddle.net/NeK4k/
我知道这是一个旧的职位，但我有同样的问题，但没有find一个答案，设置相对于父div的元素固定。 medium.com上的滚动条是一个伟大的纯CSS解决scheme，用于设置某个position: fixed; 相对于父元素而不是视口（kinda *）。 这是通过设置父div的position: relative;来实现的position: relative; 并有一个button包装的position: absolute; 而button当然是position: fixed; 如下：
<div class="wrapper"> <div class="content"> Your long content here </div> <div class="button-wrapper"> <button class="button">This is your button</button> </div> </div> <style> .wrapper { position: relative; } .button-wrapper { position: absolute; right: 0; top: 0; width: 50px; } .button { position: fixed; top: 0; width: 50px; } </style>
工作示例
*由于固定的元素不会随页面一起滚动，所以垂直位置仍然是相对于视口的，但水平位置是相对于父解决scheme的。
似乎，可以使用CSS转换
“变换”属性在元素上build立一个新的局部坐标系“
但是…这不是跨浏览器，似乎只有Opera正常工作
如果你的closuresbutton将是文本，这对我来说很好：
#close { position: fixed; width: 70%; /* the width of the parent */ text-align: right; } #close span { cursor: pointer; }
那么你的HTML可以只是：
<div id="close"><span id="x">X</span></div>
尝试位置：粘在你想修复的元素的父div上。
更多信息在这里： http ： //html5-demos.appspot.com/static/css/sticky.html 。 警告 ：检查浏览器版本兼容性。
