1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

CSS positionについて

Posted at

 positiontとは

ボックスプロパティの基準位置を指定するプロパティのことで、
positionプロパティを使うことで、要素を重ねたり、固定したりするなど、さまざまなレイアウトを作ることができます。

positionプロパティはCSSで以下のように書きます。

position : 値

positionの値

値には色々な種類があり、したいレイアウトによって変えます。

static

positionのデフォルトで設定されている初期値です。
初期値であるため、使用する機会はあまりありません。

relative

relativeは、現在の位置を起点に指定した要素を動かすことができます。
topやleftを指定することで好きな位置に要素を配置することができます。
覚え方としては「元いた位置から○○px移動させる。」と覚えましょう。

absolute

relativeで指定されている要素を基準として、位置を指定します。
absoluteは「絶対位置」と呼ばれ、「最も近い親要素の位置に対して絶対的」に配置します。基準となるのは、親要素の左上の位置です。

fixed

スクロールした際に移動せず、決まった位置に固定することができるプロパティです。
よくヘッダー部分などで使われることが多く、スクロールしてもヘッダー部分だけ固定されます。

最後に

このように、positionプロパティを使うと、要素を様々な場所へ配置することができますので、例えば、要素の上に写真を配置したり、写真の位置を変えたり、デザインの幅が非常に広がります。

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?