如何定位相对于其父级或浏览器窗口固定的元素？

定位元素：相对于父级或窗口固定

您的问题重点是使用 CSS 相对于其父级“固定”定位元素。当元素固定定位时，其位置是相对于视口确定的，而不是其父元素。

相对于父元素固定放置元素

如果您想要定位相对于其父元素固定的元素，您可以使用以下 CSS 属性：

#parent {
  position: relative;
}

#child {
  position: absolute;
  top: 50px;
  left: 50px;
}

这将定位 #child 元素其父级 #parent 向下 50 像素，向右 50 像素。

相对于窗口固定放置元素

相对于窗口固定放置元素，您可以使用以下 CSS 属性：

#element {
  position: fixed;
  top: 50px;
  right: 50px;
}

这会将 #element 元素定位在距距浏览器窗口右边缘顶部和 50 像素。

示例

考虑以下示例：

<div>
<pre class="brush:php;toolbar:false">#parent {
  width: 300px;
  background: orange;
  margin: 0 auto;
  position: relative;
}

#child {
  position: absolute;
  right: 0;
  top: 120px;
}

中在本例中，#child 元素相对于其父元素 #parent 的位置是固定的。当垂直滚动时，它会随着父元素移动，但仍会向右移动 0 像素，并在父元素顶部下方保持 120 像素。