固定定位的 div 在另一个 div 内答案

【问题标题】：Fixed Positioned Div Inside another Div固定定位的 div 在另一个 div 内
【发布时间】：2011-09-10 21:38:55
【问题描述】：

我有一个 div position:fixed;，我的问题是固定位置相对于所有页面，我需要固定 div 保持在其他 div 中，该 div 位于页面中心，边距为自动。（所以当我滚动时在页面下方，我希望始终看到 div 处于相同位置）。

我使用 jquery 插件StickyScroll，但无法在 Internet Explorer 中使用。

解决方案可以在 jquery/javascript , css 中。

谢谢

【问题讨论】：

固定的定义是相对于浏览器窗口定位。
哪个版本的IE？ IE6 及更低版本不支持 position:fixed，因此无法正常工作。 StickyScroll 页面对此发出警告：“我们在粘性元素上使用位置：固定样式，因此不支持 IE6”
我只需要在 IE 8 中工作，但我的页面和 StickyScroll 演示在 IE 中不工作..

标签： javascript jquery html css css-position

【解决方案1】：

那么你不需要固定定位，而是绝对定位。

在要定位的元素上设置position: absolute;。在居中的 div 上设置position: relative;，使其成为可以在其中放置元素的层。

【讨论】：

不，你不明白我的问题，我想要固定 div 的相同行为（如果我在页面中向下滚动，我总是看到 div ），但在容器内。
@Sbml 这听起来很矛盾。
为什么是矛盾的，网站有900px的宽度，边距自动。我有一个带有说明的 div，所以当我向下滚动页面时，我想总是看到那个 div。例如，如果我将 left:300 放在 1280x800 显示器中，则在 1920x1200 屏幕中，div 将位于网站边距之外...
@Sbml：那你两个都想要。像我描述的那样定位一个元素，然后用position: fixed; 将另一个元素放入其中。
感谢@AdamGrant 的示例，它实际上基于以下概念：相对 -> 绝对 -> 固定。

【解决方案2】：

您绝对不需要 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>

看看这个：http://jsfiddle.net/2mYQe/1/

【讨论】：

但是，如果我想让内部 div 固定在右侧，在红色外部容器内，这将如何工作？
这破坏了我的布局。当我设置为固定时，右侧元素位于我固定的 DIV 下方并向左移动

【解决方案3】：

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

样本地址：http://jsfiddle.net/2mYQe/480/

【讨论】：

很久以前了。绊倒在同一件事上。但是，此解决方案存在一个问题。您不会看到列表中的第一项，因为绝对定位的内部 div 位于其上方。（改变fiven fiddle中的第一个和第二个“Item name”）

【解决方案4】：

正确的解决方案是“flex”。距离最初的帖子已经 3 年了，所以我假设我们可以忽略 IE8 支持，转而支持支持此解决方案的更现代的浏览器。

正如这里的许多人所指出的，每个提议的解决方案都面临着问题。从内容区域中的第一项隐藏在绝对定位的标题中，或者内容区域占用了父级的整个高度，这意味着内容区域的底部有被切断的风险，除非您从整体高度中减去标题（例如 height: calc(100% - "header height"px) 这意味着你的 CSS 中有硬编码的值......不好，或者滚动条设置在父级别意味着标题正在为它而战房地产。

为了避免这些 hack 解决方案，请使用下面的“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>

【讨论】：