4.1 absolute positioning
CSSでの絶対位置づけ (absolute positioning) は、ウェブページ上の要素の配置を正確に制御できるよ。絶対位置づけを使うと、要素は通常の文書の流れから外れて、最も近い位置づけされた祖先に対して配置されるんだ。そんな祖先がいなければ、その要素は初期のコンテナ（普通は<html>か<body>）に対して配置されるよ。
絶対位置づけの主な特徴：
- 文書の流れから削除される: 絶対に位置づけられた要素は他の要素に影響を与えず、親要素のサイズを計算するときには考慮されないよ。
-
相対位置づけ: 要素は最も近い相対 (
position: relative)、絶対 (position: absolute)、固定 (position: fixed)、または粘着性 (position: sticky) の祖先に対して配置されるよ。 -
座標の使用:
top、right、bottom、leftのプロパティを使って要素の正確な位置を指定するんだ。
基本的な絶対位置づけの例
絶対位置づけされた要素のシンプルな例を見てみよう：
CSS
.container {
position: relative;
width: 300px;
height: 300px;
background-color: lightgrey;
}
.box {
position: absolute;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
background-color: deepskyblue;
}
HTML
<div class="container">
<div class="box">Absolute Box</div>
</div>
この例では、.boxは親コンテナ.containerに対して位置づけされていて、そのposition: relative;が設定されているんだ。
4.2 オーバーレイの作成
絶対位置づけはモーダルウィンドウ、ポップアップヒント、ライトボックスのようなオーバーレイを作成するのによく使われるよ。
絶対位置づけの例：
CSS
.wrapper {
min-height: 300px;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
.modal {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
padding: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
HTML
<div class="wrapper">
<div class="overlay">
<div class="modal">
<p>Modal Content</p>
</div>
</div>
</div>
4.3 正確なレイアウトとインターフェースコンポーネント
絶対位置づけは、メディアプレーヤーのコントロール、カスタムコントロール、ツールバーのような正確なレイアウトを作成するのに便利だよ。
絶対位置づけの例：
CSS
.player {
position: relative;
width: 400px;
height: 50px;
background-color: #333;
color: white;
}
.play-button {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
}
.volume-control {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
}
HTML
<div class="player">
<div class="play-button">Play</div>
<div class="volume-control">Volume</div>
</div>
4.4 複雑なレイアウトの作成
絶対位置づけを使えば、インフォメーションパネルやインタラクティブな要素のような複雑なレイアウトを作成できるよ。
絶対位置づけの例：
CSS
.dashboard {
position: relative;
width: 800px;
height: 600px;
background-color: #f0f0f0;
}
.sidebar {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 100%;
background-color: #333;
color: white;
}
.main-content {
position: absolute;
top: 0;
left: 200px;
width: calc(100% - 200px);
height: 100%;
background-color: #fff;
}
HTML
<div class="dashboard">
<div class="sidebar">Sidebar</div>
<div class="main-content">Main Content</div>
</div>
GO TO FULL VERSION