Ads by ProfitSence
Close

CSSのposition:absolute;とは?要素を思いのままに配置する方法

Last Updated on 土曜日 8日 10月 2022

position absolute

html position absolute.

position プロパティは、要素の位置を操作するのに役立ちます。

価値観

  • static
  • relative
  • absolute
  • fixed
  • sticky
  • inherit

css position absolute

Absolute

子要素に絶対値がある場合、親要素は子要素がまったく存在しないかのように動作します。

			
					.element {
  position: absolute;
}

			
	

CodePen Absolute

css absolute

また、左、下、右などの他の値を設定しようとすると、子要素がその親の寸法ではなくドキュメントに応答していることがわかります。

			
					.element {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}

			
	

Codepen Absolute BLR

relative

子要素を親要素から絶対に配置するには、親要素自体にこの要素を設定する必要があります

			
					.parent {
  position: relative;
}

			
	

Codepen Relative

これで、左、右、下、上などのプロパティは親要素を参照するため、子要素を透明にすると、親の下に座っているのがわかります。

css position

Fixed

固定値は絶対値に似ていますが、ドキュメントに対する位置を指定して要素を配置できますが、スクロールの影響を受けません。以下のデモの子要素を参照し、スクロールするとページの下部に固執し続ける方法を参照してください。

			
					.element {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}

			
	

Codepen Fixed

sticky

スティッキー値は、相対値と固定値の間の妥協のようなものです。

			
					.element {
  position: sticky; top: 50px;
}

			
	

Codepen Sticky

要素は、ビューポートのスクロール位置がビューポートの上端から 50 px の位置に到達するまで相対的に配置されます。その時点で、要素は粘着性になり、画面の50pxの固定位置に残ります。

css position absolute
css scroll position absolute