Cal*_*ius 68 html css positioning stylesheet
我有一个定位的div,其内容可能太长,所以滚动条出现(overflow:auto设置).它在ajax应用程序中用作对话框.我想在它的右上角修复一个关闭按钮,所以当用户滚动div时它不会滚动.
我尝试了它,position:fixed; right:0; top:0但它把按钮放在页面的右上方而不是div(在firefox中).
是否可以使用CSS进行此按钮放置而不会在每次滚动事件中使用js中的offsetWidth/Height进行黑客攻击？
ps:div的高度和宽度不是固定值,它取决于内容的大小和浏览器窗口的大小.用户也可以根据需要调整大小.
Sot*_*ris 83
你可以使用position:fixed;,但没有设置left和top.然后,您将使用它将其向右推,将其margin-left定位在您想要的正确位置.
在这里查看演示:http://jsbin.com/icili5
Jos*_*eph 14
当前选择的解决方案似乎误解了问题.
诀窍是既不使用绝对定位也不使用固定定位.相反,在div之外设置关闭按钮,其位置设置为relative,左浮动,以便它直接位于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>
我知道这是一篇旧帖子，但我有同样的问题，但没有找到将元素设置为相对于parent 固定的答案div。medium.com上的滚动条是一个很棒的纯 CSS 解决方案，用于设置相position: fixed;对于父元素而不是视口的内容（有点*）。这是通过将父级设置div为position: relative;并具有一个按钮包装来实现的position: absolute;，按钮当然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>
*由于固定元素不随页面滚动，因此垂直位置仍将相对于视口，但水平位置相对于此解决方案的父级。
Position:fixed给出了关于BROWSER窗口的绝对位置.所以当然它去那里.
虽然position:absolute引用了父元素,但是如果将<div>按钮放在div>容器的< 内,它应该放在你想要的位置.就像是
编辑:感谢@Sotiris,他有一个观点,可以使用一个位置来实现解决方案:固定和左边距.像这样:http://jsfiddle.net/NeK4k/