こんにちはフロントエンドエンジニアのまさにょんです！
今回は、CSS の positionプロパティの種類一覧と使い方や、relative, absolute, fixed, sticky の使い分け方についてまとめて解説していきます。
目次
positionプロパティの種類一覧と、relative, absolute, fixed, sticky の使い分け方
CSS の positionプロパティとは？
positionプロパティとは、positionを設定した要素に対して、基準位置(基準要素)からの配置位置を指定するときに用いられるプロパティです。
headerやSideBarなどの要素の表示位置を固定したいときや、要素の上に要素を重ねて配置(表示)したい時などに使用します。
positionプロパティの種類・一覧
まずは、positionプロパティの種類・一覧をまとめると、次のとおりです。
| static | 通常の位置で配置される (Default設定) |
| relative | 通常の位置を基準に「相対位置」を指定できるようになる |
| absolute | 親要素を基準に「絶対位置」を指定できるようになる |
| fixed | Windowを基準に「絶対位置」を指定できるようになる |
| sticky | スクロールに応じて要素の「絶対位置」指定を適用する |
以上5つがpositionに入る値となります。
今回はこのうちのstatic, relative, absolute, fixed , stickyの5つについて、それぞれ解説していきます。
表示位置を指定するプロパティ
positionを指定する際は、top, right, bottom, left の4つの位置を指定するプロパティを使用して、
表示位置を設定していきます。
4つすべてを指定する必要はなく、topとleft、bottomとright、topのみなど、必要なものだけを指定していきます。
位置は、px や % で指定することができ、マイナス指定で、逆方向に調整することもできます。
引用： positionプロパティを身に着けよう！基本的な知識と使い方を解説！（基礎編）
position: static は、Default値
staticはpositionの初期値で、値を入力しなくても適用されます。
topやleft などを入力しても位置を変更することはできず、またz-indexも適用されません。
要素に指定したposition設定を上書きで、打ち消して通常の配置位置に戻したい場合には使用することがあります。
position: relative は、通常の位置を基準に「相対位置」を指定できる
position: relative は、通常の位置を基準に「相対位置」を指定するために使用します。
つまり、通常配置される位置を基準として、位置を指定して配置を移動させることができます。
また、staticとは違いz-indexの指定も可能なので、重なり順を変更することも可能です。
z-indexを指定しない場合は、通常配置の要素の上に重なるように配置されます。
position: absolute は、親要素を基準に「絶対位置」を指定できる
position: absoluteは、親要素を基準に「絶対位置」を指定するために使用します。
absoluteは親要素にposition: static;以外を指定した場合、その親要素を基準に絶対位置を指定します。
position: fixed は、Windowを基準に「絶対位置」を指定できる
position: fixed は、Windowを基準に「絶対位置」を指定するために使用します。
fixedは、absoluteとは違って、Window全体を基準に絶対位置を指定します。
そして、Windowを基準にして配置しているので、スクロールしてもそこに固定され続けるのがfixedの特徴です。
position: sticky は、画面スクロールに応じて要素の「絶対位置」指定を適用する
画面スクロールに応じて要素の「絶対位置」指定を適用するために使用します。
position: sticky; は、position: fixed; より簡単かつ直感的に、Header や SideNavなどの固定ができます。
position を活用した HTML・SampleCodeの実行イメージ
position の活用イメージ①：『Headerの固定』
Header などのHTML要素を固定して、画面をスクロールしても、HTML要素が固定されてついてくるようにするなどは、よくあるpositionの活用法だと思います。
次の動画のSampleCodeは、後ほど紹介しますが、このHeaderの固定には position: sticky; を使用しています。
position の活用イメージ②：『画像の上にTextを重ねる』
画像の上にTextを重ねるなど、HTML要素の上にHTML要素を重ねる際にも、positionは活躍します。
この画像にTextを重ねるHTML要素の配置には position: relative; を使用しています。
SampleCode
先述の動画のSampleCodeを紹介しますので、ぜひpositionの練習に使ってみてください。
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Position_練習🔥</title>
<style>
html,
body {
height: 100%;
margin: 0;
padding: 0;
font-family: "Times New Roman", Times, serif;
font-size: 14px;
}
/* 1. Headerは、最上部に固定する */
/* Position: fixed と Position: sticky の違い */
.header_area {
/* position: fixed; */
position: sticky;
top: 0;
z-index: 999;
height: 120px;
width: 100%;
background-color: #5050e1;
opacity: 0.7;
}
.title_wrapper {
color: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.title {
font-size: 45px;
}
.sub_title {
font-family: "Times New Roman", Times, serif;
font-weight: lighter;
font-size: 22px;
}
.main_container {
width: 85%;
margin: 0 auto;
}
/* グラビア生写真_Area の Wrapper */
.photo_area_wrapper {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: flex-start;
gap: 20px;
}
.photo_container {
object-fit: cover;
}
.section_title {
font-size: 32px;
}
/* 2. 写真に、Textを重ねる */
.text_overray {
position: relative;
top: 80px;
left: 120px;
/* Textが、上部に重ねて見える z-index */
z-index: 2;
/* Text_見えなくなる z-index */
/* z-index: -2; */
}
.footer_area {
width: 100%;
height: 70px;
margin-top: 20px;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.1);
}
</style>
</head>
<body>
<!-- 1. Headerは、固定します：「 position: sticky; 」を活用する -->
<header class="header_area">
<h1 class="title_wrapper">
<span class="title">Robotama開発計画</span>
<span class="sub_title">Robotama is Beautiful🔥</span>
</h1>
</header>
<main>
<div class="main_container">
<!-- What's Robotama_Section -->
<section>
<!-- 2. 写真に、Textを重ねる：「 position: relative; 」を活用する -->
<h2 class="section_title text_overray">What's Robotama?</h2>
<div>
<img
src="https://masanyon.com/wp-content/uploads/2022/11/d86f450b53c3f637a992b2a5433348c7-1024x768.jpg"
alt="Robotama_1"
width="500"
height="350"
/>
</div>
</section>
<!-- Gravure Photo Section -->
<section class="section_title">
<h2 class="section_title">Robotama gravure photo collection</h2>
<div class="photo_area_wrapper">
<div class="photo_container">
<img
src="https://masanyon.com/wp-content/uploads/2022/11/robotama-kawaii-1024x768.jpg"
alt="Robotama_2"
width="500"
height="350"
/>
</div>
<div class="photo_container">
<img
src="https://masanyon.com/wp-content/uploads/2022/11/robotama-2-1024x768.jpg"
alt="Robotama_3"
width="500"
height="350"
/>
</div>
<div class="photo_container">
<img
src="https://masanyon.com/wp-content/uploads/2022/11/purupuru-robotama-1024x768.jpg"
alt="Robotama_4"
width="500"
height="350"
/>
</div>
</div>
</section>
<!-- アピール・Section -->
<section class="section_title">
<h2 class="section_title">Robotama's appeal point🔥</h2>
<ol>
<li>コスパがいい！(養うのにコストがかからない！)</li>
<li>お世話が楽ちんで、手間がかからない！</li>
<li>とにかく可愛い！</li>
</ol>
</section>
<!-- お値段・Section -->
<section class="section_title">
<h2 class="section_title">How much Robotama?</h2>
<div>本体価格は、数千円(1~3千円)位で、コスパが超いいです！</div>
</section>
</div>
</main>
<footer class="footer_area">
<div>
<small>© 2023 ロボ玉先端技術研究所 All rights reserved.</small>
</div>
</footer>
</body>
</html>
プログラミング学習・エンジニア転職関連の情報
自宅で現役エンジニアから学べる『TechAcademy』 (エンジニア転職保証)
『GEEK JOBキャンプ』スピード転職コース（無料）
【IT道場】入校時0円！ 就職目的プログラミングスクール
エンジニア転職なら100％「自社開発」求人に強い【クラウドリンク】
『techgym』 (Python特化・無料)
Twitterやってます！Follow Me！
神聖グンマー帝国の逆襲🔥
神聖グンマー帝国の科学は、世界一ぃぃぃぃぃぃ！！！！！
参考・引用
最近の投稿
【SQL】1回のINSERTで、複数行のレコードを一括挿入・一括追加する方法
JavaScriptでランダムなuuidを作成する方法(randomUUIDの使い方)
PythonでCSVをJSONに変換する方法
PythonでCSV・Dataframeを指定の行数まで切り取る方法
JavaScript(TypeScirpt)のfor-of文でindexの値も取得する方法と、Type IterableIteratorエラーの解決方法
VSCode上のPython import文の「インポート “XXXXX” をソースから解決できませんでした」エラーの解決方法
