Question

我遇到的情况是，当用户向下滚动时，侧边栏的一部分会获得固定位置，但是当我抓住位置并将固定的css应用到侧边栏元素时，它会固定到整个屏幕，而不仅仅是父级（是边栏）

如何正确设置？

Answer 1

首先了解定位：

固定定位或[位置：已修复]

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

相对定位或[位置：相对]

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

绝对定位或[位置：绝对]

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

因此，在您的情况下，您的父母div应该有position:relative而您的孩子div应该有position:absolute而不是position:fixed

Reference Link

Answer 2

从阅读你的问题我认为你有这样的事情：

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

不幸的是，您现在可能知道，top，left，right或bottom将始终相对于positon: fixed元素上的浏览器窗口。

解决方案是用另一个div包装你的.fixed div，然后在同一个包装器上完成所有的定位，而不是.fixed div。让我演示一下：

HTML：

<div class="sidebar">

    <div class="wrapper">
        <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;
}

在这个小提琴中看到它的实际效果：http://jsfiddle.net/joplomacedo/T2PL5/

Answer 3

制作父position: relative，然后其子级将其用作absolute定位的参考。有关详细信息，请参阅Definition of "containing block"中的CSS 2 specs。

关于fixed定位：如何修复任何东西（这意味着固定在视口上）但仍然相对于其他某个元素，而这些元素又不固定到视口？这似乎与我相矛盾，这就是我第一次误解你的问题的原因。

Answer 4

This plugin正是您所需要的

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

4 个答案: