固定位置的元素可以相对于其相对位置的父元素吗？

如果父元素相对定位，元素是否可以相对于其父元素固定定位？

简介

这个问题提出了一个关于固定定位和相对定位之间相互作用的有趣观点

相对于父级固定定位

不，不可能将元素相对于其父级固定定位，即使父级是相对定位的。当元素设置为固定时，无论父元素的定位如何，它都会相对于浏览器窗口定位。

相对于窗口固定定位

但是，您可以使用以下语法定位相对于浏览器窗口固定的元素：

#element {
  position: fixed;
  left: 50px;  // Horizontal position
  top: 50px;   // Vertical position
}

在此示例中，元素 #element 被定位距离浏览器窗口左边缘 50 像素，距离上边缘 50 像素。

示例

考虑以下 HTML 和 CSS 代码：

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

#feedback {
  position: fixed;
  right: 0;
  top: 120px;
}

在此示例中，虽然父 div (#wrapper) 是相对定位的，但子链接(#feedback) 相对于浏览器窗口的位置是固定的。因此，无论父级的位置如何，链接都将位于距浏览器窗口右边缘 0 像素和距上边缘 120 像素的位置。