假设我在一个普通的 div 中有一个绝对定位的 div。
<div id="wrap"> <div id="sidebar"></div> </div>
在这种情况下，当我为“侧边栏”声明top 和left 时，它们是在“包装”内部计算的，因为后者是position="relative"。
但是，当我将“侧边栏”更改为 position="fixed" 时，坐标是相对于 <body> 而不是“环绕”计算的，这会导致“侧边栏”跳出其父级，即使坐标保持不变。
如何使“侧边栏”保持在“包装”内，但又被修复？
谢谢。
【问题讨论】：
其实position:fixed属性的文档很清楚：生成一个绝对定位的元素，相对于浏览器窗口定位。
因此，坐标的计算不是相对于主体，而是相对于窗口。
如何使“侧边栏”保持在“包装”内，但又被修复？
这个问题似乎很奇怪。即使 'sidebar' 最初停留在 'wrap' 内，用户也可以随时向下滚动：'wrap' 将移动到窗口顶部（并且可能消失），而 'sidebar' 将位于用户屏幕上完全相同的位置。
编辑
当您第一次访问任何堆栈交换站点（例如，cooking）时，具有“固定”位置的元素示例是“欢迎来到...”顶部栏。
【讨论】：
正如@Nikita 所暗示的那样，这个想法不是使用position: fixed，而是使用position: absolute。
为此，您还需要定位父元素 #wrap 和 position: relative' in order to have the#sidebar` 相对于父元素而不是窗口的位置。
#sidebar 固定在在#wrap div 中，并随页面滚动。#sidebar 固定在视口上，并且保持随着页面滚动而固定。【讨论】：
给“sidebar”一个position: absolute，它应该可以解决问题。
【讨论】：