1日1UI投稿！
昨日思いついたので本日よりスタートです。
UIに限らずですが、アウトプットを積極的にやっていきます。
モーダルウィンドウを作成
本日はモーダルウィンドウ作成しました。
完成品は↓
See the Pen モーダルウィンドウ by ri-tama (@ri-tama) on CodePen.
以下自分の備忘録として躓いたポイントを2点(もっと躓いてましたが...)
1.getElementById()とquerySelector()の違い
()内のHTMLの要素を取得することができるものですが
大きな違いは前者はid属性のみ
後者は全ての要素を取得することができます。
2.position設定
一番躓いたポイントです。
以下失敗例
See the Pen モーダルウィンドウ by ri-tama (@ri-tama) on CodePen.
一発でわかると思いますが、
#modalのposition設定を忘れております(完成品からその部分だけ消しております)
こうなると#modalのpositionは初期値のstaticになっているわけですから、#maskより下にきます。
ということで、positionを設定し直して、無事完成となりました。
その後色々調べていくと
こちら。
positionが重なって、z-index設定されていない時はどうなるの？
というのが上の回答になります。HTMLの出現順で完成品となっているということがわかります。
終わりに
というわけでモーダルウィンドウ完成しました。
昨日インプットして今朝からアウトプットをやりましたが
CSSの理解度不足を実感しております。
明日もUI投稿できるように、昼からも勉強します。
最後まで読んでいただきありがとうございました。