要素を重ねる
やり方
親要素にposition: relative、子要素にposition: absoluteを設定する
子要素の位置を調整して、要素を重ねる
topとleftを使うのが一般的だと思う
例
code:html
<div class="parent">
<div class="child">
</div>
code:css
.parent {
position: relative;
}
.child {
position: absolute;
top: 10px;
left: 10px;
}
ref
親要素にposition: relativeを設定する理由
子要素の絶対位置を決める基準を、親要素にするため
設定しないと、画面左上が基準になる
ref
基本的には、先に定義した要素が下になる
z-indexを指定しない場合の話
正確には、以下の順で下から上に重ねられる(MDNより)
1. ルート要素の背景と境界
2. 位置指定なしのブロックの子孫、 HTML 内での出現順
3. 位置指定要素、 HTML 内での出現順
ref
とてもわかりやすい
z-indexを指定して、重ね順を決める
設定しない要素は、z-index: auto
大きいほうが上にくる
ref