固定定位Div在另一个Div内

Question

我有一个div position:fixed;，我的问题是固定的位置相对于所有页面，我需要固定的div保持在页面居中的其他div中，其中页边距为auto。（所以当我向下滚动页面时我想要的总是把div看到相同的位置）。

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

解决方案可以是jquery / javascript，css。

谢谢

Answer 1

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

在要放置的元素上设置position: absolute;。在居中的div上设置position: relative;，使它成为一个可以将元素放在里面的层。

Answer 2

你绝对不需要jQuery或JavaScript来实现这一目标。这就是你需要的：HTML：

<div class="outer">
    <div class="inner">some text here
    </div>
</div>

CSS：

.outer {
    width:200px;
    height:600px;
    background-color:red;
    margin:0 auto;
}
.inner {
    width:50px;
    border:1px solid white;
    position:fixed;
}

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

Answer 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/

Answer 4

正确的解决方案是“flex”。自原始帖子开始已有3年了，所以我假设我们可以忽略IE8支持，支持更支持这种解决方案的现代浏览器。

正如这里的许多人所指出的，每个提出的解决方从内容区域中的第一项隐藏到绝对定位标题，或内容区域消耗父级的完整高度意味着内容区域的底部被切断的风险，除非您从其总高度中减去标题（例如高度：calc（100％ - “标题高度”px），这意味着你的CSS中有硬编码的值...不好，或者在父级别设置的滚动条意味着标题正在为它而战房地产。

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