7

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

如何正确设置？

4

4 回答 4

15

首先了解定位：

固定定位或 [ position:fixed ]

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

相对定位OR [ position:relative ]

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

绝对定位OR [ position:absolute ]

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

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

参考链接

于 2012-07-11T11:15:51.127 回答
7

通过阅读您的问题，我假设您有这样的事情：

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

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

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

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

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

于 2012-07-11T13:14:37.657 回答
0

让父母position: relative然后它的孩子将使用它作为他们absolute定位的参考。有关详细信息，请参阅CSS 2 规范中“包含块”的定义。

关于fixed定位：如何固定任何东西（这意味着固定到视口）但仍然相对于其他一些元素，而其他元素又不固定到视口？这对我来说似乎很矛盾，这就是我首先误解你的问题的原因。

于 2012-07-11T11:11:46.783 回答
0

这个插件正是你需要的

于 2012-07-11T13:08:52.453 回答