並び・配置
position 基準位置を変える
意味
要素を、通常の流れのまま置くか、基準を変えてずらすかを決める場合に使います。relative、absolute、fixed、sticky がよく出ます。ずらし量は top や left とセットです。初期値は static です。
重ね順は z-index です。static のままでは z-index は効きません。最初から全部を absolute にすると、後から直すのが難しくなりやすいです。
コード
HTMLとCSSをコピーして、自分のファイルへ貼り付ければ同じ見た目を確認できます。
<div class="box"><span class="pin">右上</span></div>.box {
position: relative;
height: 5rem;
background: #f3f1ec;
}
.pin {
position: absolute;
right: 0.75rem;
top: 0.75rem;
background: #160076;
color: #fff;
padding: 0.25rem 0.5rem;
}プレビュー
ブラウザ対応
| ブラウザ | 対応 |
|---|---|
| Chrome | 1〜 |
| Firefox | 1〜 |
| Safari | 1〜 |
| Edge | 12〜 |
| Chrome Android | 18〜 |
| Safari iOS | 1〜 |
出典: MDN Web Docs（`@mdn/browser-compat-data`）