経緯
positionプロパティを使っていると、「あれ？これpaddingやmarginでもいいんじゃない？」と思うことが何度かありました。そこでそれぞれの使い道について記事を書きたいと思います。
static
これは何も指定をしていないデフォルト状態。
もし使用するとしたら打ち消しをしたい時とかです！
relative
[使用例]
- paddingやmarginの影響を受けたくない
- 要素を少しだけずらしたい
- 謎に埋まらない隙間を埋める時
- 「absolute」「sticky」の基準にしたいとき
- 余白の外側へ飛び出すデザイン
飛び出すデザイン例
absolute
relativeを設定した親タグの中で自由に設置できる（なければbodyが基準になる）。
- 「画像」と「テキスト」を重ねる
- 中央寄せ
index.html
<div class="wrapper">
<div class="inner"></div>
</div>
style.css
.inner{
top:0;
bottom:0;
right:0;
left:0;
margin:auto;
}
fixed
ウィンドウに固定したい要素があるのなら必須。
[使用例]
- ヘッダー
- トップボタン
- バナー
- コンテンツ
↓
z-index
width 100%
margin(padding:top) を一緒に使うと便利！
sticky
fixedと似ているが、基準をrelativeにしたいとき
まとめ
使用頻度は多くないものの、使いどきを見極めれば便利なものばかりだということを知りました。
余白では再現できない、細かな動き等をpositionを使って再現していきたいと思います。