CSS Layout - The position Property
この文章では、CSSの`position`プロパティとその様々な値（static、relative、fixed、absolute、sticky）の効果、そしてそれらを使ってHTML要素をどのように配置するかについて解説します。
1. CSS Positioning
CSSのポジショニングは、HTML要素を通常の文書上の位置から移動させることができます。これは、ウェブページのレイアウトを作成する上で重要な概念です。
CSSには、5つの異なるポジショニング方法があります。
- `static`
- `relative`
- `fixed`
- `absolute`
- `sticky`
2. The position: static; Property
`position: static;`は、要素のデフォルト値です。この値が設定されている場合、要素は特別に配置されず、文書の通常のフローに従って配置されます。 `top`、`bottom`、`left`、`right`プロパティは効果を持ちません。
3. The position: relative; Property
`position: relative;`は、要素を通常の位置から相対的に配置します。 `top`、`bottom`、`left`、`right`プロパティを使用して、要素を通常の位置からどれだけ移動するかを指定できます。
`position: relative;`で要素を移動しても、その要素が元々占めていたスペースは保持されます。
例：`position: relative;`を使って要素を下に、右に移動する
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 300px;
height: 100px;
border: 1px solid black;
}
.box {
width: 50px;
height: 50px;
background-color: red;
position: relative;
top: 25px;
left: 25px;
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
</div>
</body>
</html>
この例では、赤い正方形は、親要素である"container"クラスのdiv要素に対して、上から25px、左から25pxの位置に配置されています。
4. The position: fixed; Property
`position: fixed;`は、要素をブラウザウィンドウに対して固定します。 `top`、`bottom`、`left`、`right`プロパティを使用して、要素をウィンドウ内のどこに固定するかを指定できます。
`position: fixed;`で配置された要素は、ページをスクロールしても、常に同じ位置に表示されます。
例：`position: fixed;`を使って、常にページの上部に表示される要素を作成する
<!DOCTYPE html>
<html>
<head>
<style>
.header {
background-color: lightblue;
padding: 20px;
position: fixed;
top: 0;
width: 100%;
}
</style>
</head>
<body>
<div class="header">
<h1>ページのヘッダー</h1>
</div>
<p>ページのコンテンツ...</p>
</body>
</html>
この例では、"header"クラスのdiv要素は、常にページの上部に表示されます。
5. The position: absolute; Property
`position: absolute;`は、要素を最も近い位置指定された祖先要素に対して絶対的に配置します。 `top`、`bottom`、`left`、`right`プロパティを使用して、要素を祖先要素内のどこに配置するかを指定できます。
位置指定された祖先要素がない場合、要素はHTMLドキュメントに対して配置されます。
例：`position: absolute;`を使って、画像を別の要素の右上に配置する
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
width: 200px;
height: 100px;
border: 1px solid black;
}
.image {
position: absolute;
top: 0;
right: 0;
}
</style>
</head>
<body>
<div class="container">
<img src="image.jpg" alt="画像" class="image">
</div>
</body>
</html>
この例では、画像は、"container"クラスのdiv要素の右上に配置されます。
6. The position: sticky; Property
`position: sticky;`は、`relative`と`fixed`を組み合わせたような動作をします。要素は、スクロール位置に応じて、`relative`と`fixed`の間で切り替わります。
例：`position: sticky;`を使って、ページを下にスクロールするとページの上部に固定されるヘッダーを作成する
<!DOCTYPE html>
<html>
<head>
<style>
.header {
background-color: lightblue;
padding: 20px;
position: sticky;
top: 0;
width: 100%;
}
</style>
</head>
<body>
<div class="header">
<h1>ページのヘッダー</h1>
</div>
<p>ページのコンテンツ...</p>
</body>
</html>
この例では、"header"クラスのdiv要素は、ページを下にスクロールすると、ページの上部に固定されます。
7. Overlapping Elements
`z-index`プロパティは、重なり合う要素のスタック順序を制御するために使用されます。 `z-index`の値が大きい要素は、値が小さい要素の上に表示されます。
例：`z-index`を使って、2つの重なり合う要素の表示順序を制御する
<!DOCTYPE html>
<html>
<head>
<style>
.box {
position: absolute;
width: 100px;
height: 100px;
}
.red {
background-color: red;
z-index: 1;
}
.blue {
background-color: blue;
top: 50px;
left: 50px;
}
</style>
</head>
<body>
<div class="box red"></div>
<div class="box blue"></div>
</body>
</html>
この例では、赤い正方形は青い正方形の上に表示されます。これは、赤い正方形の`z-index`が1で、青い正方形の`z-index`がデフォルト値（0）であるためです。
CSS position: relative に関するQ&A
-
`position: relative;`と`position: absolute;`の違いは何ですか？
`position: relative;`は、要素を通常の位置から相対的に配置します。一方、`position: absolute;`は、要素を最も近い位置指定された祖先要素に対して絶対的に配置します。 `position: relative;`で配置された要素は、文書の通常のフローにとどまりますが、`position: absolute;`で配置された要素は、通常のフローから外れます。
-
`position: fixed;`を使って、要素を常にページの下部に表示するにはどうすればよいですか？
`bottom: 0;`プロパティを使用して、要素をブラウザウィンドウの下部に固定することができます。
<style> .footer { background-color: lightblue; padding: 20px; position: fixed; bottom: 0; width: 100%; } </style> -
`z-index`プロパティは、どのような場合に役立ちますか？
`z-index`プロパティは、重なり合う要素のスタック順序を制御する場合に役立ちます。たとえば、モーダルウィンドウやドロップダウンメニューを実装する場合などに使用されます。