固定定位的div在另一个div内部

Question

我有一个 position:fixed; 的 div，我的问题是，fixed的位置是相对于整个页面的，但我需要这个fixed div保持在另一个div内的中心位置，并且带有auto的margins。（所以当我向下滚动页面时，我希望始终看到div处于相同的位置）。

我使用jquery插件StickyScroll，但是在Internet Explorer中无法使其正常工作。

解决方案可以使用jquery/javascript和css。

谢谢

- Sbml

---

固定的定义是它相对于浏览器窗口定位。 - joakimdahlstrom

哪个版本的IE？ IE6及以下版本不支持position:fixed，因此它将无法工作。 StickyScroll页面警告说：“我们在粘性元素上使用position:fixed样式，因此不支持IE6”。 - Jayme Tosi Neto

我只需要在IE 8中能用的，但我的网页和 StickyScroll演示在IE中无法使用... - Sbml

Answer 1

那么您不希望使用固定定位，而是绝对定位。

在要定位的元素上设置 position: absolute;。 在居中的 div 上设置 position: relative;，这样它就成为了可以定位内部元素的图层。

- Guffa

---

不，你没有理解我的问题。我想要一个固定的div的相同行为（如果我在页面中向下滚动，我始终可以看到该div），但是在一个容器内。 - Sbml

@Sbml 这听起来相当矛盾。 - joakimdahlstrom

为什么会出现矛盾，网站宽度为900像素，边距自动。我有一个带有说明的div，所以当我向下滚动页面时，我希望始终能看到该div。如果我在我的1280x800显示器上放置left:300，那么在1920x1200屏幕上，该div将超出网站边距... - Sbml

@Sbml：那么您需要两者。像我描述的那样定位一个元素，然后在其中放置另一个具有“position: fixed;”属性的元素。 - Guffa

我同意，这并不矛盾。绝对定位的元素不会粘在视口上。 - Adam Grant

感谢@AdamGrant的示例，它实际上基于概念：相对->绝对->固定。 - Rehmat

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

- George Katsanos

---

但是如果我想让内部div固定在红色外部容器的右侧，这该怎么做呢？ - Adam Grant

这破坏了我的布局。当我设置为固定时，右侧元素会在我的固定DIV下面并向左移动。 - Dharmaraj

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

Sample at: http://jsfiddle.net/2mYQe/480/

- Vishal Vaishya

---

很久以前就遇到了同样的问题。不过这个解决方案有一个问题，因为绝对定位的内部 div 在列表中的第一项之上，所以你看不到它。 （在给定的 fiddle 中更改第一个和第二个“Item name”） - Seb

Answer 4

我认为你应该将内部div的位置设置为sticky，它也是固定的，但相对于父容器（div）。

我曾经遇到过同样的问题，我就是这样解决的。

<div id="container">
    <div id="inner">Some text here..</div>
</div>
    
<!-- CSS -->
<style>
    #container{
        position: <!--any position-->;
    }
    
    #inner{
        position: sticky;
    }
</style>

- Hirwa

Answer 5

正确的解决方案是“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>

- spyder1329