我有一个定位的div，其内容可能太长，因此出现滚动条（overflow:auto设置）。它充当ajax应用程序中的对话框。我想在其右上角修复一个关闭按钮，以便当用户滚动div时不会滚动离开。
我尝试过，position:fixed; right:0; top:0但是它把按钮放在页面的右上角而不是div中（在Firefox中）。
是否可以仅使用CSS进行此按钮放置，而不会在每次滚动事件中都破坏js中的offsetWidth / Height？
ps：div的高度和宽度不是固定值，它取决于内容的大小和浏览器窗口的大小。用户还可以根据需要调整其大小。
a标签中href（或什至只使用a标签而不是div并将其设置为display: inline-block）。如果是JS，则可以监听div。我是否正确理解您的问题？
Answers:
您可以使用position:fixed;，但无需设置left和top。然后，您将使用将它推向右侧margin-left，以将其放置在所需的正确位置。
在此处查看演示：http : //jsbin.com/icili5
fixed在未指定top和时浏览器必须以这种方式定位元素left？stackoverflow.com/questions/8712047/…–
当前选择的解决方案似乎误解了该问题。
诀窍是既不使用绝对定位也不使用固定定位。而是将div外部的关闭按钮的位置设置为相对，并向左浮动，使其紧邻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给出有关浏览器窗口的绝对位置。所以它当然会去那里。
虽然position:absolute是指父元素，所以如果将<div>按钮放置div>在容器的<之内，它应该位于您要放置的位置。就像是
编辑：感谢@Sotiris，他有一点，可以使用position：fixed和margin-left来实现解决方案。像这样：http : //jsfiddle.net/NeK4k/
我知道这是一篇老文章，但是我有同样的问题，但是没有找到一个相对于父元素固定该元素的答案div。medium.com上的滚动条是一个很棒的纯CSS解决方案，用于设置position: fixed;相对于父元素而不是视口（kinda *）的某些内容。这是通过将parent设置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>
*由于固定元素不随页面滚动，因此此解决方案的垂直位置仍相对于视口，而水平位置相对于父级。
似乎可以使用CSS转换
“'transform'属性在元素上建立新的本地坐标系”，
但是...这不是跨浏览器，似乎只有Opera可以正常工作
尝试在您要固定的元素的父div上放置position：sticky。
此处提供更多信息：http : //html5-demos.appspot.com/static/css/sticky.html。 注意：检查浏览器版本兼容性。
我实现了一个具有固定位置（wiewport）但相对于其父级宽度的元素。
我只需要包装我的固定元素，并给父母一个宽度100％。同时，包装的固定元素和父元素位于一个div中，该宽度根据包含网站内容的页面而变化。通过这种方法，我可以使固定元素始终位于内容的相同距离处，具体取决于该元素的宽度。在我的情况下，这是一个“到顶部”按钮，始终显示在距底部15像素和距内容15像素的位置。
https://codepen.io/rafaqf/pen/MNqWKB
<div class="body">
<div class="content">
<p>Some content...</p>
<div class="top-wrapper">
<a class="top">Top</a>
</div>
</div>
</div>
.content {
width: 600px; /*change this width to play with the top element*/
background-color: wheat;
height: 9999px;
margin: auto;
padding: 20px;
}
.top-wrapper {
width: 100%;
display: flex;
justify-content: flex-end;
z-index: 9;
.top {
display: flex;
align-items: center;
justify-content: center;
width: 60px;
height: 60px;
border-radius: 100%;
background-color: yellowgreen;
position: fixed;
bottom: 20px;
margin-left: 100px;
cursor: pointer;
&:hover {
opacity: .6;
}
}
}