z-indexとpositionの練習をしてみよう!(所要時間の目安: 15分〜20分)
要素の重なり順を調整するz-indexと、要素の配置調整をするpostionはセットで実装する必要があることが、上記の実例でわかりました。
先ほどの上記の例をアレンジして、z-indexとpositionの簡単な練習問題を解いてみましょう。
問題
以下の完成見本になるように、HTMLとCSSファイルを編集しましょう。
要件
- 半透明の背景色を持つ要素を用意し、最も上に重なるように調整
- 背景色の透過には、rgbaを背景色設定で使用すると、透過の割合も調整が可能
- 画像はチャプター7で使用した、本書内のソースコードのものを使用(「lesson3-z-index」のフォルダ内)
取り組むときのコツ
上記の目安時間をもとに、自分で解く時間を決めて取り掛かり、それ以上経過した場合は、答えを見て確認します。
答えを見てもわからない箇所があれば、10分〜20分ほど時間を決めて調べ、それ以上かかるようであれば、以下のソースに質問を投稿してみましょう。