Javascript 在另一个 Div 内固定定位 Div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6279672/
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
Fixed Positioned Div Inside another Div
提问by Sbml
I have one div position:fixed;and my problem is that position fixed is relatively to all the page, I need that the fixed div stays inside other div that is centered in the page with margins in auto.(So when I scroll down the page I want to see always the div in the same position).
我有一个 div position:fixed;，我的问题是位置固定是相对于所有页面的，我需要固定 div 留在其他 div 中，该 div 位于页面中心，边距为自动。（所以当我向下滚动页面时，我想始终看到同一位置的 div）。
I use the jquery plugin StickyScrollbut I can't make it work in Internet Explorer.
我使用 jquery 插件StickyScroll但我不能让它在 Internet Explorer 中工作。
The solution could be in jquery/javascript , css.
解决方案可能是在 jquery/javascript 、 css 中。
Thanks
谢谢
采纳答案by Guffa
Then you don't want fixed positioning, but absolute positioning.
那么你不需要固定定位，而是绝对定位。
Set position: absolute;on the element that you want to position. Set position: relative;on the centered div so that it becomes a layer that you can position elements inside.
设置position: absolute;要位置的元素。设置position: relative;在居中的 div 上，使其成为您可以在其中放置元素的图层。
回答by George Katsanos
You definitely don't need jQuery or JavaScript to achieve this. This is what you need:
您绝对不需要 jQuery 或 JavaScript 来实现这一点。这是你需要的：
.outer {
width:200px;
height:600px;
background-color:red;
margin:0 auto;
}
.inner {
width:50px;
border:1px solid white;
position:fixed;
}<div class="outer">
<div class="inner">some text here
</div>
</div>Have a look at this: http://jsfiddle.net/2mYQe/1/
看看这个：http: //jsfiddle.net/2mYQe/1/
回答by Vishal Vaishya
Just changed little in George Katsanos code might be helpful for some one.
只是在 George Katsanos 代码中稍作改动可能对某些人有所帮助。
.outer {
width:200px;
height:300px;
background-color:red;
margin:0 auto;
overflow:auto;
}
.inner {
width:182px;
border:1px solid white;
position:absolute;
background-color:buttonface;
}
Sample at: http://jsfiddle.net/2mYQe/480/
回答by spyder1329
The correct solution is "flex." It's been 3-years since the original post so I'm going to assume we can ignore IE8 support in favor for more modern browsers that support this solution.
正确的解决方案是“flex”。距离最初的帖子已经过去 3 年了，所以我假设我们可以忽略 IE8 支持，转而支持支持此解决方案的更现代的浏览器。
As many here have noted every proposed solution faces issues. From the first item in the content area being hidden from the absolute positioned header, or the content area consuming the full height of the parent meaning there is risk for the bottom of the content area being cut off unless you subtract the header from it's overall height (ex. height: calc(100% - "header height"px) which means you have hard-coded values in your CSS...not good, or the scroll bar being set at the parent level meaning the header is fighting it for real-estate.
正如这里的许多人所指出的，每一个提议的解决方案都面临着问题。从内容区域中的第一个项目被绝对定位的标题隐藏，或者内容区域消耗父级的整个高度意味着内容区域的底部有被切断的风险，除非您从它的整体高度中减去标题（例如 height: calc(100% - "header height"px) 这意味着你的 CSS 中有硬编码值......不好，或者滚动条设置在父级别意味着标题正在为它而战房地产。
In order to avoid these hack solutions use the "flex" solution below.
为了避免这些黑客解决方案，请使用下面的“flex”解决方案。
<div style="width: 200px; float: right; border: 1px solid black;
display: flex; flex-direction: column;">
<div style="width: 100%;">
<div style="width: 100%;">
I'm a header
</div>
</div>
<div style="width: 100%; height: 100%; overflow:auto;">
<div style="height:900px; background-color:lavender;">content area</div>
</div>
</div>
