positionプロパティは、要素の配置方法を指定します。このプロパティは要素を文書のフローから外して配置したり、他の要素に対して相対的に位置を決定したりするために使われます。
positionプロパティの値とその効果の一覧
position: static;– デフォルトの位置指定で、特別な位置変更はありません。position: relative;– 要素を通常の位置から相対的に配置します。position: absolute;– 要素を親要素に対して絶対的に配置します。position: fixed;– ビューポートに対して固定された位置に要素を配置します。position: sticky;– スクロールに応じて要素が固定されます。
注意点や関連情報
position: static;はデフォルト値で、他の位置指定プロパティ（top, left, right, bottom）は無視されます。
position: relative;では、要素は文書のフローに残りますが、相対的に位置が変更されます。
position: absolute;は、最近接のposition: relativeやposition: absoluteの親要素を基準に配置されます。
position: fixed;はビューポートを基準に配置され、スクロールしてもその位置に固定されます。
position: sticky;はスクロール位置に応じて要素が固定される特殊な動作をします。
positionが効かない時の原因と対策
親要素がposition: staticのままである
position: absoluteを使用する場合、要素は最も近いposition: relativeやposition: absoluteを持つ親要素を基準に配置されます。親要素がposition: staticのままだと、absoluteで指定した位置が予期しない場所になることがあります。
対策: position: absoluteを使用する要素の親要素にposition: relativeを設定して、要素が親要素に対して相対的に配置されるようにします。例えば、親要素にposition: relative;を指定します。
z-indexが正しく設定されていない
positionが適用されていても、z-indexが適切に設定されていない場合、要素が他の要素の後ろに隠れてしまうことがあります。これにより、要素が正しく表示されないことがあります。
対策: 要素のz-indexを確認し、必要に応じて適切な値を設定します。例えば、z-index: 1;を設定して、要素が他の要素の前に表示されるようにします。
共通するCSSコード
.css-sample-container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 300px;
width: 100%;
margin: 20px 0;
border: 2px solid #333;
background-color: #f0f0f0;
position: relative;
}
.css-sample-box {
width: 200px;
height: 100px;
background-color: #d3e0ea;
text-align: center;
line-height: 100px;
color: #333;
margin: 10px 0;
}
position: static;
このスタイルはデフォルトであり、要素は通常の文書フローに従って配置されます。
HTMLコード
<div class="css-sample-container">
<div class="css-sample-box css-sample-position-static">Static Position</div>
</div>
CSSコード
.css-sample-position-static {
position: static;
}
表示結果
position: relative;
このスタイルでは、要素が通常の位置から相対的に20pxだけ移動しています。
HTMLコード
<div class="css-sample-container">
<div class="css-sample-box css-sample-position-relative">Relative Position</div>
</div>
CSSコード
.css-sample-position-relative {
position: relative;
top: 20px;
left: 20px;
}
表示結果
position: absolute;
このスタイルでは、親要素の左上から50px離れた位置に要素が配置されています。
HTMLコード
<div class="css-sample-container">
<div class="css-sample-box css-sample-position-absolute">Absolute Position</div>
</div>
CSSコード
.css-sample-position-absolute {
position: absolute;
top: 50px;
left: 50px;
}
表示結果
position: fixed;
このスタイルでは、要素がビューポートの左上に固定され、スクロールしてもその位置に固定されます。
HTMLコード
<div class="css-sample-container">
<div class="css-sample-box css-sample-position-fixed">Fixed Position</div>
</div>
CSSコード
.css-sample-position-fixed {
position: fixed;
top: 210px;
left: 10px;
}
表示結果
position: sticky;
このスタイルでは、スクロールすると要素が画面上部に固定されます。
HTMLコード
<div class="css-sample-container">
<div class="css-sample-box css-sample-position-sticky">Sticky Position</div>
</div>
CSSコード
.css-sample-position-sticky {
position: sticky;
top: 0;
}
表示結果
まとめ
position: static;はデフォルトの位置指定で、特別な位置変更は行われません。position: relative;は要素を文書のフローに残しつつ相対的に移動します。position: absolute;は親要素に対して絶対位置で配置されます。position: fixed;はビューポートに対して固定され、スクロールしてもその位置にとどまります。position: sticky;はスクロールに応じて要素が固定されます。