CSS の位置

CSS 定位详解：从 static 到 sticky，全面掌握元素定位

この記事では、CSSの様々なpositionプロパティについて解説していきます。static, relative, absolute, fixed, stickyの違いを理解し、実例を交えながらそれぞれの特性や使い方を学んでいきましょう。

1. CSS 定位基礎：理解网页布局の基石

1.1. 什么是 CSS 定位？

CSSの定位とは、HTML要素をウェブページ上の特定の位置に配置するための仕組みです。要素を上下左右に移動させたり、他の要素との相対的な位置関係を調整したりすることができます。

1.2. 定位属性 `position` の値及含义

`position` プロパティには、以下の値を設定することができます。

値	意味
`static`	デフォルト値。要素は通常の文書フローに従って配置されます。
`relative`	要素は自身の本来の位置を基準として、相対的に配置されます。
`absolute`	要素は、直近の配置済み祖先要素を基準として、絶対的に配置されます。
`fixed`	要素は、ビューポートを基準として、固定的に配置されます。スクロールしても要素の位置は変わりません。
`sticky`	要素は、スクロール位置に応じて、`relative` と `fixed` のように動作します。

1.3. 偏移属性 `top`、`right`、`bottom`、`left` 的作用

`top`, `right`, `bottom`, `left` プロパティは、要素の位置を本来の位置から上下左右にどれだけずらすかを指定します。これらのプロパティは、position プロパティが static 以外の場合にのみ有効です。

2. 静态定位 (static)：默认的文档流定位

2.1. static 定位的特点

要素は通常の文書フローに従って配置されます。
top, right, bottom, left プロパティは効力を持ちません。

2.2. 为什么说了解 static 定位很重要

static はデフォルト値なので、明示的に指定することはあまりありません。しかし、他の定位方法と比較することで、CSSの定位の仕組みをより深く理解することができます。

3. 相对定位 (relative)：微调元素位置的利器

3.1. relative 定位的特点

要素は自身の本来の位置を基準として、相対的に配置されます。
top, right, bottom, left プロパティを使って、要素の位置を調整することができます。
要素が移動しても、元の位置にはスペースが残ります。


<div style="position: relative; top: 20px; left: 30px;">相対定位</div>

3.2. relative 定位与其他定位方式的配合使用

relative 定位は、他の定位方式と組み合わせて使用することができます。例えば、relative 定位を適用した要素の中に、absolute 定位を適用した要素を配置することができます。

4. 绝对定位 (absolute)：脱离文档流的精准定位

4.1. absolute 定位的特点

要素は、直近の配置済み祖先要素を基準として、絶対的に配置されます。
配置済み祖先要素がない場合は、ドキュメントを基準として配置されます。
要素が移動すると、元の位置にはスペースは残りません。

4.2. 包含块的概念及如何确定包含块

包含块とは、absolute 定位された要素の位置決め基準となる要素のことです。包含块は、以下のルールに従って決定されます。

要素の祖先要素のうち、position プロパティが static 以外で最も近いものが包含块となります。
position プロパティが static 以外の祖先要素がない場合は、ドキュメントが包含块となります。

4.3. absolute 定位在网页布局中的应用

absolute 定位は、以下のような場合に便利です。

要素を特定の位置に固定したい場合
要素を重ねて表示したい場合
要素を画面の中央に配置したい場合


<div style="position: relative; width: 200px; height: 100px; background-color: lightblue;">
  <div style="position: absolute; top: 10px; left: 20px; background-color: pink;">絶対定位</div>
</div>

5. 固定定位 (fixed)：相对于视窗的固定元素

5.1. fixed 定位的特点

要素は、ビューポートを基準として、固定的に配置されます。
スクロールしても要素の位置は変わりません。

5.2. fixed 定位与 absolute 定位的区别

fixed 定位と absolute 定位の最大の違いは、基準となる要素が異なることです。fixed 定位はビューポートを基準とするのに対し、absolute 定位は配置済み祖先要素を基準とします。

5.3. fixed 定位在网页开发中的常见应用场景

fixed 定位は、以下のような場合に便利です。

ヘッダーやフッターを常に画面上部に表示したい場合
スクロールしても表示位置が変わらないボタンを設置したい場合


<div style="position: fixed; bottom: 0; right: 0; background-color: gray;">固定定位</div>

6. 粘性定位 (sticky)：结合滚动效果的灵活定位

6.1. sticky 定位的特点

要素は、スクロール位置に応じて、relative と fixed のように動作します。
要素が本来の位置にあるときは relative のように動作し、スクロール位置が特定の場所に達すると fixed のように動作します。

6.2. sticky 定位的应用场景

sticky 定位は、以下のような場合に便利です。

スクロールに応じて、ヘッダーを画面上部に固定したい場合
テーブルのヘッダー行を常に表示しておきたい場合

6.3. sticky 定位の浏览器兼容性问题

sticky 定位は比較的新しいプロパティであるため、古いブラウザでは正しく動作しない場合があります。ブラウザの対応状況を確認してから使用してください。


<div style="position: sticky; top: 0; background-color: lightgreen;">粘性定位</div>

7. 总结：选择合适的定位方式构建网页布局

7.1. 不同定位方式的特点比较

定位方式	特点
`static`	デフォルト。文書フローに従って配置。
`relative`	自身の本来の位置を基準として相対的に配置。
`absolute`	直近の配置済み祖先要素を基準として絶対的に配置。
`fixed`	ビューポートを基準として固定的に配置。
`sticky`	スクロール位置に応じて、`relative` と `fixed` のように動作。

7.2. 根据实际需求选择合适的定位方式

ウェブページのレイアウトを作成する際には、それぞれの定位方式の特性を理解し、適切なものを選択することが重要です。