如何使元素相对于其父元素而非整个屏幕具有固定位置？

Question

我遇到了这样的情况，当用户向下滚动时，侧边栏的一部分会固定在屏幕上，但是当我获取位置并将fixed css应用于侧边栏元素时，它会固定在整个屏幕上，而不仅仅是父元素（即侧边栏）。

请问如何正确设置这个呢？

- Ahmed Fouad

---

An element with fixed position is positioned relative to the browser window. - Ron van der Heijden

@Ahmed Fouad：你可以分享你的代码吗？ - Ahsan Khurshid

Answer 1

首先了解定位:

固定定位 或者 [ position:fixed ]

具有固定定位的元素相对于浏览器窗口进行定位。

相对定位 或者 [ position:relative ]

相对定位的元素相对于其正常位置进行定位。

绝对定位 或者 [ position:absolute ]

绝对定位的元素相对于第一个具有非静态位置的父元素进行定位。

所以在您的情况下，您的父级 div 应该具有 position:relative，并且您的子级 div 应该具有 position:absolute，而不是 position:fixed

参考链接

- Ahsan Khurshid

---

但是 position: absolute 并没有帮助，因为我想要在屏幕顶部显示元素，但仍然在包装器宽度内（例如1000px）。 - Ahmed Fouad

Answer 2

阅读您的问题后，我假设您有类似以下内容的东西：

 <div class="sidebar">
    <div class="fixed" style="position: fixed;"></div>
 </div>

很不幸，如你所知，对于使用position: fixed属性的元素，top、left、right或bottom属性始终相对于浏览器窗口定位。解决办法是将.fixed div包装在另一个div中，并将所有需要定位的操作都放在该包装器上，而不是在.fixed div上进行。让我演示一下：

HTML代码：

<div class="sidebar">

    <div class="helper">
        <div class="fixed"></div>
    </div>

 </div>

CSS：

​.sidebar {
    position: relative;
}

.helper {
    position: absolute;
    top: XYZ; left: ZYX; /*where XYZ and ZYX would
                           be the values you were 
                           trying before to give to .fixed*/
}

.fixed {
    position: fixed;
}

在这个fiddle中看到它的运作：http://jsfiddle.net/joplomacedo/T2PL5/

- João Paulo Macedo

Answer 3

让父元素的position: relative，然后它的子元素将以此作为其absolute 定位的参考点。有关详细信息，请参阅 "包含块(containing block)"的定义 和 CSS 2规范。

关于fixed定位：如何使任何东西固定（即相对于视口固定）但仍然相对于其他未固定到视口的元素？这似乎与我相矛盾，这也是我最初误解你的问题的原因。

- MvG

---

据我所知，这仅适用于“绝对”而不适用于“固定”。 - Olly Hodgson

Answer 4

这个插件正是您所需要的

- Ahmad Alfy

Answer 5

我试图实现这个目标，以便能够展示一个有问题的全屏模态框的失败测试案例。事实上，你可以通过对容器应用CSS变换来限制一个position: fixed;元素。例如，一个容器的transform: translate(200px);将破坏它的全屏特性。它会表现得像一个普通的div。

进一步阅读后，我发现变换不是唯一导致这种情况的属性，还有filter和perspective。

另外回答这个问题，你不能像相对-绝对组合那样使其相对于容器，但你可以将其限制在容器内，该容器也是相对的，但不会影响top、right、bottom、left的定位和大小效果。

- Dávid Bíró