positionプロパティ
positionプロパティは、要素の配置方法を指定します。
このプロパティは、多くの場合、
上、右、下、左のオフセットをそれぞれ設定する
top、
right、
bottom、
leftプロパティと
組み合わせて使用されます。
構文
セレクタ {
position: absolute | relative | fixed | static | sticky;
}
positionの値
| 値 | 説明 |
|---|---|
absolute |
絶対配置。 要素は通常のドキュメントフローから取り除かれ、 最も近い位置指定された先祖要素（存在する場合）または ブラウザウィンドウを基準に配置されます。 |
relative |
相対配置。 要素は通常のドキュメントフロー内での自身の位置を基準に移動しますが、 もともと占有していたスペースは確保されたまま残ります。 |
fixed |
固定配置。 要素は通常のドキュメントフローから取り除かれ、 ブラウザウィンドウを基準に配置されます。 ページをスクロールしても同じ場所に留まります。 |
static |
静的配置。 位置指定が行われないことを意味し、要素は通常通りに振る舞います。 |
sticky |
粘着配置。
要素はスクロールで指定された位置に達するまではrelativeのように振る舞い、
その後、指定された場所に（fixedのように）貼り付きます。
|
デフォルト値: static。
例 . 絶対配置
小さなオフセットを付けて、要素を画面の左上隅に配置します:
<div class="elem"></div>
<div class="main">
some long text
</div>
.elem {
position: absolute;
top: 40px;
left: 50px;
width: 100px;
height: 100px;
background-color: #98fb98;
}
.main {
width: 400px;
text-align: justify;
margin: 20px auto;
}
:
例 . 絶対配置
今度は、小さなオフセットを付けて、要素を画面の右上隅に配置します:
<div class="elem"></div>
<div class="main">
some long text
</div>
.elem {
position: absolute;
top: 40px;
right: 50px;
width: 100px;
height: 100px;
background-color: #98fb98;
}
.main {
width: 400px;
text-align: justify;
margin: 20px auto;
}
:
例 . 固定配置
固定配置では、要素はスクロールしても同じ場所に留まります:
<div class="elem"></div>
<div class="main">
some long text
</div>
.elem {
position: fixed;
top: 40px;
left: 50px;
width: 100px;
height: 100px;
background-color: #98fb98;
}
.main {
width: 400px;
text-align: justify;
margin: 20px auto;
}
:
例 . 相対配置
相対配置では、要素は通常の位置を基準に移動しますが、 他の要素は要素が移動していないかのように振る舞います:
<div class="container">
<div class="elem elem1"></div>
<div class="elem elem2"></div>
<div class="elem elem3"></div>
</div>
.container {
display: flex;
justify-content: flex-row;
}
.elem {
margin: 0 3px;
width: 100px;
height: 100px;
background-color: #add8e6;
}
.elem2 {
position: relative;
top: 20px;
left: 30px;
background-color: #e6addf;
}
:
例 . 入れ子
親要素のpositionプロパティの値がrelativeの場合、
絶対配置された子要素は親要素を基準に配置されます:
<div class="container">
<div class="elem"></div>
</div>
.container {
position: relative;
border: 1px solid red;
width: 500px;
height: 300px;
}
.elem {
position: absolute;
top: 0px;
right: 0px;
width: 100px;
height: 100px;
background-color: #add8e6;
}
:
例 . 入れ子
親要素のpositionプロパティの値がabsoluteの場合、
絶対配置された子要素は親要素を基準に配置されます:
<div class="container">
<div class="elem"></div>
</div>
.container {
position: absolute;
top: 30px;
left: 30px;
border: 1px solid red;
width: 500px;
height: 300px;
}
.elem {
position: absolute;
top: 0px;
right: 0px;
width: 100px;
height: 100px;
background-color: #add8e6;
}
:
例 . 粘着配置
要素のpositionプロパティの値がstickyの場合、
要素はスクロールで指定された位置に達するまではrelativeのように振る舞い、
その後、その場所に貼り付きます。
粘着ヘッダーを作ってみましょう:
<h1>メインサイトヘッダー</h1>
<div class="header">header header header</div>
<div class="main">
some long text
</div>
h1 {
text-align: center;
}
.header {
position: sticky;
top: 0;
padding: 20px;
background: #f0f0f0;
text-align: center;
font-weight: bold;
}
.main {
width: 400px;
margin: 20px auto;
border: 1px solid #ccc;
padding: 20px;
text-align: justify;
}
:
例 . 位置指定なし
要素に絶対配置を指定しながら位置を指定しない場合、 要素は位置指定なしのときの場所に留まりますが、 他の要素はその要素を認識しなくなります:
<div class="container">
<div class="elem elem1"></div>
<div class="elem elem2"></div>
<div class="elem elem3"></div>
</div>
.container {
position: relative;
border: 1px solid red;
width: 500px;
height: 300px;
}
.elem {
display: inline-block;
}
.elem2 {
position: absolute;
width: 50px;
height: 50px;
background-color: #e6addf;
}
.elem1, .elem3 {
width: 100px;
height: 100px;
background-color: #add8e6;
}
:
例 . 単一の軸
絶対配置では、単一の軸に対してのみ位置を指定することができます。
例えば、topプロパティを指定すると、
要素は垂直方向には指定された位置に配置されますが、
水平方向には元々あった場所のまま留まります:
<div class="container">
<div class="elem elem1"></div>
<div class="elem elem2"></div>
<div class="elem elem3"></div>
</div>
.container {
position: relative;
border: 1px solid red;
width: 500px;
height: 300px;
}
.elem {
display: inline-block;
}
.elem2 {
position: absolute;
top: 20px;
width: 50px;
height: 50px;
background-color: #e6addf;
}
.elem1, .elem3 {
width: 100px;
height: 100px;
background-color: #add8e6;
}
:
例 . すべての位置
絶対配置では、幅と高さを指定せずに、 すべての辺に対して位置を指定することができます。 この場合、要素は親ブロックの中央に配置されます:
<div class="container">
<div class="elem"></div>
</div>
.container {
position: relative;
border: 1px solid red;
width: 500px;
height: 300px;
}
.elem {
position: absolute;
top: 20px;
bottom: 20px;
left: 20px;
right: 20px;
background-color: #add8e6;
}
:
関連項目
-
要素の重ね順を指定する
z-indexプロパティ
