固定位置的元素可以相對於其相對位置的父元素嗎？

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

簡介

這個問題提出了一個關於固定定位和相對定位之間相互作用的有趣觀點

相對於父級固定定位

不，不可能將元素相對於其父級固定定位，即使父級是相對定位的。當元素設定為固定時，無論父元素的定位如何，它都會相對於瀏覽器視窗定位。

相對於視窗固定定位

但是，您可以使用以下語法定位相對於瀏覽器視窗固定的元素：

#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 像素的位置。