概要
この記事は
プログラミングの記事です
プログラミングの、z-indexの記事です
z-indexは、デザインの位置を決めることが出来ます
デザインの位置
z-indexは、デザインの位置を決めることが出来ます
ブロックが、ブロックの前面になっています
使用方法
z-indexは、
positionプロパティとともに使用します
例えば、
『z-index: 50px; position: relative; top: 80px; left: 50px;』です
また、Z-indexの数値が大きいほど、前面になります
使用例
1デザインを作ります
デザインのコードです
2コードを足します
z-index及びpositionプロパティを足します
3結果
デザインのコードです
positionプロパティ
positionプロパティは、
例えば、
position: relative;や、
position: absolute; があります
外側の方のブロックに、
relativeかfixedをつけることで、
外側の方のブロックを起点に配置することができます
（https://www.sejuku.net/
blog/53016#:~:text=
absoluteを指定する要素の親要素にrelativeかfixedをつけることで、
親要素を起点に配置することができます。）
デザインのコードです
参考資料
資料
所感
- 反応させたいブロック全てに、positionプロパティを指定する必要があります
- 一括指定プロパティというものを知りました
そして、positionプロパティは一括指定プロパティではありません
そのため、一括で指定出来ません（例えばpadding:0px 0px 0px 0pxのように）
地道に指定することになります
(https://
developer.mozilla.org/ja/
docs/Web/CSS/Guides/
Cascade/
Shorthand_properties）
