Zenn
📑

CSS positionプロパティ

2023/03/09に公開
CSS
HTML
tech

positionプロパティ

positionプロパティは、要素の位置を指定するために使用されるCSSプロパティのこと！
Webサイトでの要素の配置に重要な役割を果たす。
例えば、ナビゲーションバーのフッターにドロップダウンメニューを配置するなど。

relativeやabsolute、fixedなどの値から位置を動かす基準を選択して、
要素の位置を変えたり、要素を他の要素の上に重ねたりすることができる！！🙆🏻‍♀️

  • static
    基準値や位置の設定を行わない（初期値）
    top、bottom、left、rightは適用されず、上下左右に移動しない。

  • relative
    絶対位置を指定する。基準位置は、ウィンドウ左上の位置を指定できる。
    親要素にrelativeが指定されている場合は、親要素の左上が基準位置になる。

.box2{
position: relative;
top: 100px;
left: 200px;
}

上記のように、box2の現在の位置の端を基準として、
上から100px、左から200px移動してbox1と重ねた場合、下の図のようになる。

  • absolute
    相対位置を指定する。static指定時の位置（初期の位置）が基準位置になる。
.box2{
position: absolute;
left: 100px;
bottom: 200px;
}

上記のようにbox2を、ウィンドウの端を起点として、
上から100px、左から200px移動してbox1と重ねた場合、下の図のようになる。

このように、要素にabsoluteをかけると、ウィンドウを基準として移動する。

positionプロパティの値をrelativeにするか、absoluteにするかで要素の移動の起点が変わる！！

  • fixed
    fixedを指定することで、ウィンドウ左端を基準とした上下左右に要素を移動し、固定させることができる！
    スクロールしても、fixedを指定した要素が消えることはなく、常に画面内の指定した位置に残り続ける🥺

z-indexプロパティで重なりの順序を指定

スクロールした際に、fixedを指定した要素の上に他の要素が重なってしまうことがある。
これは、各要素の重なりの順序を指定する「z-indexプロパティ」を使用することで解決できる！
z-indexプロパティは、指定したい要素の重なりの順序を整数で指定。
0が基準で、値が大きくなればなるほど、他の要素より上の最前面にすることが可能！

関連するプロパティ

要素の位置を調整していく上で合わせて使用するプロパティ

  • top／bottomプロパティ
    positionプロパティが指定されている要素にのみ指定できる。
    topは上からの距離を指定し、bottomは下からの距離を指定する。

  • left／rightプロパティ
    positionプロパティが指定されている要素にのみ指定できる。
    leftは左からの距離を指定し、rightは右からの距離を指定する。

子要素にabsoluteを指定した際の動き方

relative、absolute、fixedの基本的な動き方だけでは、
起点が「ウィンドウ」か「現在の位置」しかないため、
位置を決めるプロパティの値が大きくなってしまう可能性があり、
コード的に言えば少し強引なコーディングになってしまう、、、

〜親要素を起点として位置を移動させる方法〜

移動させたい要素にpositionのabsoluteを、起点にしたい親要素に対しpositionのrelative、absolute、fixedのいずれかをかけることで親要素を起点にした要素の移動が可能になる！

positionプロパティ今までなんとなく使ってきたけど、
やっと理解できた！
他にも位置を指定するプロパティあるからうまく長所等踏まえて
使いこなせるようになりたい！

他のも後日まとめておこう！φ(･･
おやすみなさい

Discussion