こんにちは🐶
元エンジニアが数年ぶりにHTMLとCSSを触ることになったので、
つまずいたところをまとめています。
今回は、絶対位置・相対位置について🤲🏻
👊🏻 それでは、Let's Stydy!✏️
絶対位置
親要素の基準点から､好きな場所に貼り付ける位置指定のこと！
<p>絶対位置</p>
<div>
<img id="p1-1" src="images/hana.jpg" alt="" />
<img id="p2-2" src="images/mori.jpg" alt="" />
<img id="p3-3" src="images/sora.avif" alt="" />
</div>
#p2-2 {
position: absolute; /*ここが絶対位置指定設定*/
top: 100px;
left: 100px;
}
✍🏻指定した時の流れを確認する
通常の配置の流れから外れる
通常、HTMLの要素は上から下へ、左から右へと順番に配置されます。
しかし、position: absolute;が設定された要素は、この流れから外れます。
そのため、後続の要素（この場合は空の画像 #p3-3）は、まるで絶対位置の要素が存在しないかのように配置されます。
最も近い「position: relative;」または「position: absolute;」が設定された親要素を基準に位置を決める
①もし、絶対位置の要素を囲む親要素に何か設定がある場合、絶対位置の要素はその親要素の内側の端を基準にプロパティで位置が決定されます。
②もし、親要素にこれらの position プロパティが設定されていない場合、絶対位置の要素はブラウザのウィンドウの端を基準に位置が決定されます。
🌿結果
- 今回は、①のように基準となる親要素（
<div>）に特別なpositionプロパティがないため、ブラウザのウィンドウの左上を基準に位置が決められました！ - 花と空の画像は、通常の配置の流れに従って
<div>内に並んで表示されました。
▼①のブラウザ端スタートじゃないバージョンも見てみよう！
<div>
<img id="p1-1" src="images/hana.jpg" alt="" />
<img id="p2-2" src="images/mori.jpg" alt="" />
<img id="p3-3" src="images/sora.avif" alt="" />
</div>
body > div {
position: relative;
border: 2px solid blue;
width: 400px;
height: 300px;
}
#p2-2 {
position: absolute;
top: 100px;
left: 100px;
}
① body > div に position: relative
- この
divは、青い枠の親ボックスだよ。 -
position: relativeがあるから…
→ 中のposition: absoluteな子要素は、このdivを基準に位置決めされるようになるんだ！
② #p2-2 に position: absolute
画像 #p2-2（森の画像）は、
✅ 親要素（青い枠）の左上角をスタート地点として
✅ 右に100px・下に100pxの位置に表示されるよ！
③空の画像は、森の画像がないものと考え次に表示される。
インライン要素だから横並びにしようとするけど、幅が指定されてスペースが足りないから、縦に表示されているよ💪🏻
相対位置
- 「元の場所を基準に、ちょっとだけ動かすよ！」っていう指定
- HTMLの流れ上は元の位置にある扱い！
- 見た目だけ動かしている！
- 他の要素には“元の場所”が空いて見える！
<div>
<img id="p1" src="images/hana.jpg" alt="" />
<img id="p2" src="images/mori.jpg" alt="" />
<img id="p3" src="images/sora.avif" alt="" />
</div>
#p2 {
position: relative;
top: 100px;
left: 100px;
}
🐣絶対位置と相対位置の違い【早見表】
| 項目 |
position: relative（相対位置） |
position: absolute（絶対位置） |
|---|---|---|
| 基準になる場所 | 自分が元いた場所 | 一番近いposition: relative（など）がついてる親要素（なければbody） |
| 移動の仕方 | 元の位置からちょっとずらす | 基準の親要素からピタッと貼り付ける |
| HTMLの流れ（レイアウト） |
元の位置はそのまま扱われる （周りの要素は影響を受けない） |
そこにいなかったことになる （他の要素が詰めてくる） |
| よく使う場面 | 少し位置を微調整したいとき | 完全に好きな場所に配置したいとき（レイアウトを自由にしたいとき） |
フレキシブルに位置を設定する
最後に、さまざまなプロパティを指定して、自由度を高く位置を指定する方法を学んでいきます！
z-indexで重なりを指定
- 要素の「重なり順」を数値で指定するCSSプロパティ
- 数値が大きいほど手前に表示される！
✅ 使い方の例
.box1 {
position: relative;
z-index: 1;
}
.box2 {
position: relative;
z-index: 10; /* box1 より前にくる */
}
-
要素に
position（relative/absolute/fixed/sticky） をつける必要あり！ -
position: static（デフォルト状態）だと効かない！ -
autoの場合は、親と同じ重なりレベルになる
visibilityで見えない状態にする
-
visible:ボックスを見える状態にする -
hidden:ボックスを見えない状態にする（でも存在はしている）
✨p1にhiddenを設定してみた！
overflowではみ出る部分の表示を設定する！
#p1 {
overflow: hidden; /*はみ出た部分は表示しない*/
}
#p2 {
overflow: scroll; /*はみ出た部分はスクロールして表示させる*/
}
#p3 {
overflow: visible; /*はみ出た部分も表示する*/
}
fixed
指定した要素をブラウザの画面（ビューポート）上の特定の位置に固定する
- ページをいくらスクロールしても、画面上の同じ場所にピタッとくっついて動かない
いかがだったでしょうか。
未来の自分のために、誰かのためにこの記事が役に立てば幸いです✨🧚🏻