Question

假设我在一个普通的div中有一个绝对定位的div。

<div id="wrap"> <div id="sidebar"></div> </div>

在这种情况下，当我为“侧边栏”说明top和left时，它们会在“换行”内部计算，因为后者是position="relative"。

然而，当我将“侧边栏”更改为position="fixed"时，坐标是相对于<body>计算的，而不是“换行”，这导致“侧边栏”跳出其父级，即使坐标保持不变。

如何让“侧边栏”留在“换行”中，然后修复？

感谢。

Answer 1

实际上，position:fixed属性的文档非常清晰：生成一个绝对定位的元素，相对于浏览器窗口定位。

因此，坐标的计算不是相对于身体，而是相对于窗口。

如何让“侧边栏”保持在“包装”内，然后修复？
这个问题似乎很奇怪。即使'侧边栏'最初停留在'wrap'内，用户也可以随时向下滚动：'wrap'将移动到窗口的顶部（并且可能会消失），而'sidebar'将在用户屏幕上的完全相同的位置。

修改
当您第一次来到任何堆栈交换站点（例如cooking）时，具有“固定”位置的元素的示例是“欢迎使用...”顶栏。

Answer 2

@Nikita暗示，这个想法不是使用position: fixed而是使用position: absolute。

为此，您还需要将父元素#wrap与position: relative' in order to have the＃sidebar`位置相对于父元素而不是窗口定位。

JS Bin demo of position: fixed，请注意#sidebar已修复到视口，在页面滚动时仍然固定。

Answer 3

将position: absolute提供给“siderbar”，它应该可以解决问题。