固定位置の要素は、相対的に位置する親を基準にすることができますか?

親が相対的に配置されている場合、要素を親に対して固定して配置できますか?

はじめに

この質問は、固定されたものと相対的なものとの間の相互作用について興味深い点を提起しています。配置メソッド。

親を基準にして固定配置

いいえ、親が相対的に配置されている場合でも、要素を親を基準にして固定配置することはできません。要素が固定に設定されている場合、親の位置に関係なく、要素はブラウザ ウィンドウを基準にして配置されます。

ウィンドウを基準にして固定配置

ただし、次のようにすることもできます。次の構文を使用して、ブラウザ ウィンドウを基準にして要素を固定して配置します:

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

この例では、要素#要素は、ブラウザ ウィンドウの左端から 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) が配置されていますが、相対的な場合、子リンク (#フィードバック) はブラウザ ウィンドウに対して固定して配置されます。したがって、リンクは、親の位置に関係なく、ブラウザ ウィンドウの右端から 0 ピクセル、上端から 120 ピクセルの位置に配置されます。