要素を親またはブラウザ ウィンドウに対して固定して配置するにはどうすればよいですか?

要素の配置: 親またはウィンドウに対して固定

あなたの質問は、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 ピクセル下、右端から 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 ピクセルのままになります。