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

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

这里的许多人都指出，每个提议的解决方案都面临问题。从内容区域中的第一项隐藏到绝对定位标题，或内容区域消耗父级的完整高度意味着内容区域的底部被切除的风险，除非您从其中减去标题＆＃39 ; s总高度（例如高度：calc（100％ - ＆＃34;标题高度＆＃34; px）表示您的CSS中有硬编码值...不好，或者滚动条设置在父级别意味着标题正在争夺房地产。

为了避免这些黑客解决方案，请使用＆＃34; flex＆＃34;解决方案如下。

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

固定定位Div在另一个Div内

4 个答案: