Blogブログ

【CSS】position/displayまとめ

こんにちは。

今回はcssのpositionとdisplayについてまとめました。
ぜひ参考にしてください。

positionについて

positionは、要素をどのように配置するのかを設定する際に使用する CSS のプロパティで、以下のように書きます。

.box {
position: relative;
}

代表的な値は次の4つです。

1. static
2. relative
3. absolute
4. fixed

static
初期値です。
top, right, bottom, left, z-indexは効果がありません。

relative
現在の位置から相対的に位置を決定します。
位置はtop, right, bottom, leftの値に基づきます。

absolute
親様子を基準として、絶対的に位置を決定します。
位置はtop, right, bottom, leftの値に基づきます。

fixed
画面の指定した位置に固定されます。
位置はtop, right, bottom, leftの値に基づきます。

displayについて

displayは、要素の表示形式を設定する際に使用する CSS のプロパティで、以下のように書きます。

.box {
display: inline;
}

代表的な値は次の9つです。

1. block
2. inline
3. flex
4. grid
5. inline-block
6. inline-flex
7. inline-grid
8. none
9. contents

block
要素がブロックボックスとして表示されます。

• 要素が縦に並ぶ
• 要素の前後に改行が入る
• 幅と高さが指定できる
• p、h1〜h6、divなどの初期値

inline
要素がインラインボックスとして表示されます。

• 要素が横に並ぶ
• 幅と高さは指定できない
• a、span、imgなどの初期値

といった特徴があります。

flex
要素がフレックスボックスモデルに従って表示されます。
1次元的なレイアウトに向いています。

• 要素を横に並べる
• 並べる方向を指定する（flex-direction）
• 折り返しを指定する（flex-wrap）
• 水平方向/垂直方向のレイアウトを指定する（justify-content/align-items）

といった事が可能になります。

grid

要素がグリッドモデルに従って表示されます。
2次元的なレイアウトに向いています。

• 要素を横に並べる
• 縦・横両方向の間の余白を指定する(gap)
• グリッドの縦/横方向の位置を指定する(grid-column/grid-row)
• グリッドの列の幅/行の高さを指定する(grid-template-columns/grid-template-rows)
• グリッドにエリア名を指定する(grid-template-areas)
• 要素の配置方法を指定する(grid-auto-flow）

といった事が可能になります。

inline-block
要素はブロックボックスとして表示されますが、周囲のコンテンツに対しては、インラインボックスのように表示されます。

inline-flex
要素はインラインボックスのように表示され、中の要素をフレックスボックスモデルに従って表示します。

inline-grid
要素はインラインボックスのように表示され、中の要素をグリッドモデルに従って表示します。

none
要素の表示を無くし、レイアウトに影響を与えなくなります。
すべての子孫要素も表示がなくなります。

contents
要素の表示を無くしますが、子孫要素は継続して表示されます。