Html CSS 位置：固定在定位元素内
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4962266/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS position:fixed inside a positioned element
提问by Calmarius
I have a positioned div whose content can be too long so scrollbars appear (overflow:autoset). 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.
我有一个定位的 div，其内容可能太长，因此出现滚动条（overflow:auto设置）。它用作 ajax 应用程序中的对话框。我想在它的右上角修复一个关闭按钮，这样当用户滚动 div 时它不会滚动。
I tryed it with position:fixed; right:0; top:0but it placed the button on the right top of the page not in the div (in firefox).
我试过了，position:fixed; right:0; top:0但它把按钮放在页面的右上角而不是在 div 中（在 firefox 中）。
Is it possible to do this button placement using CSS only without hacking with the offsetWidth/Height in js on every scroll event?
是否可以仅使用 CSS 来完成此按钮放置，而无需在每个滚动事件上使用 js 中的 offsetWidth/Height 进行修改？
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.
ps：div的高度和宽度不是固定值，它取决于内容的大小和浏览器窗口的大小。用户还可以根据需要调整其大小。
回答by Sotiris
You can use the position:fixed;, but without set leftand top. Then you will push it to the right using margin-left, to position it in the right position you wish.
您可以使用position:fixed;, 但不使用 setleft和top。然后您将使用margin-left,将其推到右侧以将其放置在您希望的正确位置。
Check a demo here: http://jsbin.com/icili5
在此处查看演示：http: //jsbin.com/icili5
回答by Joseph
The current selected solution appears to have misunderstood the problem.
当前选择的解决方案似乎误解了问题。
The trick is to neither use absolute nor fixed positioning. Instead, have the close button outside of the div with its position set to relativeand a left float so that it is immediately right of the div. Next, set a negative left margin and a positive z index so that it appears above the div.
诀窍是既不使用绝对定位，也不使用固定定位。相反，将关闭按钮的位置设置为相对位置并在 div 之外设置一个左浮动按钮，以便它紧靠 div 的右侧。接下来，设置一个负的左边距和一个正的 z 索引，以便它出现在 div 上方。
Here's an example:
下面是一个例子：
#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>
回答by Damien Pirsy
Position:fixedgives an absolute position regarding the BROWSER window. so of course it goes there.
Position:fixed给出关于 BROWSER 窗口的绝对位置。所以它当然会去那里。
While position:absoluterefers to the parent element, so if you place your <div>button inside the <div>of the container, it should position where you meant it to be.
Something like
Whileposition:absolute指的是父元素，所以如果你将<div>按钮放在div>容器的 <内，它应该放在你想要的位置。就像是
EDIT: thanks to @Sotiris, who has a point, solution can be achieved using a position:fixed and a margin-left. Like this: http://jsfiddle.net/NeK4k/
编辑：感谢@Sotiris，他有一个观点，可以使用 position:fixed 和 margin-left 来实现解决方案。像这样：http: //jsfiddle.net/NeK4k/
回答by Lifehack
I know this is an old post but I had the same question but didn't find an answer that set the element fixed relative to a parent div. The scroll bar on medium.comis a great pure CSS solution for setting something position: fixed;relative to a parent element instead of the viewport (kinda*). It is achieved by setting the parent divto position: relative;and having a button wrapper with position: absolute;and the button of course is position: fixed;as follows:
我知道这是一篇旧帖子，但我有同样的问题，但没有找到将元素设置为相对于 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>
*Since fixed elements don't scroll with the page the vertical position will still be relative to the viewport but the horizontal position is relative to the parent with this solution.
*由于固定元素不随页面滚动，垂直位置仍将相对于视口，但水平位置相对于使用此解决方案的父元素。
回答by 4esn0k
Seems, css transforms can be used
似乎可以使用css变换
"‘transform' property establishes a new local coordinate system at the element",
"'transform' 属性在元素上建立了一个新的局部坐标系",
but ... this is not cross-browser, seems only Opera works correctly
但是...这不是跨浏览器，似乎只有 Opera 才能正常工作
回答by Lohit Bisen
Try position:stickyon parent div of the element you want to be fixed.
在要修复的元素的父 div 上尝试position:sticky。
More info here: http://html5-demos.appspot.com/static/css/sticky.html. Caution: Check for browser version compatibility.
更多信息：http: //html5-demos.appspot.com/static/css/sticky.html。 注意：检查浏览器版本兼容性。
回答by agapitocandemor
I achieved to have an element with a fixed position (wiewport) but relative to the width of its parent.
我实现了具有固定位置（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.
我只需要包装我的固定元素并给父元素一个 100% 的宽度。同时，包裹的固定元素和父元素在一个宽度随页面变化的div中，包含网站的内容。通过这种方法，我可以让固定元素始终与内容的距离相同，具体取决于该元素的宽度。就我而言，这是一个“到顶部”按钮，始终显示在距底部 15 像素和距内容右侧 15 像素处。
https://codepen.io/rafaqf/pen/MNqWKB
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;
}
}
}
回答by thatmiddleway
If your close button is going to be text, this works very well for me:
如果您的关闭按钮将是文本，这对我来说非常有效：
#close {
position: fixed;
width: 70%; /* the width of the parent */
text-align: right;
}
#close span {
cursor: pointer;
}
Then your HTMLcan just be:
那么你HTML可以是：
<div id="close"><span id="x">X</span></div>
