CSS position:fixed inside a positioned element

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.

151625 次浏览
小开

Position:fixed给出了一个关于 BROWSER 窗口的绝对位置。

虽然 position:absolute指的是父元素，所以如果您将 <div>按钮放在容器的 < div>中，它应该位于您希望它位于的位置。 Something like

编辑: 感谢@Sotiris，他有一个观点，解决方案可以通过一个立场: 固定和边距左。像这样: http://jsfiddle.net/NeK4k/

小开
最佳答案

您可以使用 position:fixed;，但不设置 left和 top。然后你会把它推到右边使用 margin-left，定位它在正确的位置你想要的。

点击这里查看演示: http://jsbin.com/icili5

小开

似乎可以使用 CSS 转换

“’转换’属性在元素上建立一个新的局部坐标系”,

但是... 这不是跨浏览器，似乎只有 Opera 能正常工作

小开

如果你的关闭按钮将是文本，这对我来说非常有效:

#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 外部设置关闭按钮，并设置它的 相对位置设置和一个左浮点，以便它立即位于 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>
小开

我知道这是一个老职位，但我有同样的问题，但没有找到一个答案，设置相对于父 div固定的元素。Medium.com上的滚动条是一个非常好的纯 CSS 解决方案，用于设置某些 position: fixed;相对于父元素而不是 viewport (有点 *)。它是通过将父 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>

工作范例

由于固定元素不随页面滚动，垂直位置仍然相对于视窗，但水平位置相对于父元素。

小开

在要修复的元素的父 div 上尝试 位置: 粘性。

更多信息请点击: http://html5-demos.appspot.com/static/css/sticky.html。 Caution: Check for browser version compatibility.

小开

我实现了一个具有固定位置(wiewport)但相对于其父元素的宽度的元素。

I just had to wrap my fixed element and give the parent a width 100%. At the same time, the wrapped fixed element and the parent are in a div which width changes depending on the page, containing the content of the website. With this approach I can have the fixed element always at the same distance of the content, depending on the width of this one. In my case this was a 'to top' button, always showing at 15px from the bottom and 15px right from the content.

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;
}
}
}
小开

位置固定但相对于父 div

#parent-div {
position: *either static or relative, doesn't matter*
width: 1024px;  // for example
height: 300vh;  // for example
}


#sticky-div {  // should be div
position: sticky;
bottom: 40px;
width: 30px;  // your-element's width or larger
height: 30px;  // your-element's height or larger
margin-top: -40px;  // to compensate "bottom"
margin-left: auto;
margin-right: 20px;  // substitution for "right" property
z-index: 10;
}


#your-element {
width: 30px;
height: 30px;
background-color: red;
}


<div id="parent-div">
<div id="sticky-div">
<whatever id="your-element" />
</div>
</div>
小开

不知道它是否与其他解决方案不同，但这就是我如何理解没有顶部、左边等等的固定位置:

您可以使用包装器将元素放在任意位置，然后在元素本身上使用“固定”位置。这将“冻结”元素。

只有在确保主体上没有全局滚动条的情况下，这种方法才有效。

因此，这应该适用于问题的用例。

<body style="height :80vh; display:grid;place-items:center">
<div style="height:150px; width:150px;background:grey;overflow-y:auto">
<div style="height:2000px;position:relative">
<div style="position:absolute;top:0;right:25px;">
<button style="position:fixed">
x
</button>
</div>
<div>stuf</div>
<div>stuf</div>
<div>stuf</div>
<div>stuf</div>
<div>stuf</div>
</div>
</div>
</body>


提交答案