Chapter 08

練習問題2

Arisa Fukuzaki
Arisa Fukuzaki
2020.10.11に更新

z-indexとpositionの練習をしてみよう!(所要時間の目安: 15分〜20分)

要素の重なり順を調整するz-indexと、要素の配置調整をするpostionはセットで実装する必要があることが、上記の実例でわかりました。

先ほどの上記の例をアレンジして、z-indexとpositionの簡単な練習問題を解いてみましょう。

問題

以下の完成見本になるように、HTMLとCSSファイルを編集しましょう。

z-index_practice

要件

  1. 半透明の背景色を持つ要素を用意し、最も上に重なるように調整
  2. 背景色の透過には、rgbaを背景色設定で使用すると、透過の割合も調整が可能
  3. 画像はチャプター7で使用した、本書内のソースコードのものを使用(「lesson3-z-index」のフォルダ内)

画像

取り組むときのコツ

上記の目安時間をもとに、自分で解く時間を決めて取り掛かり、それ以上経過した場合は、答えを見て確認します。

答えを見てもわからない箇所があれば、10分〜20分ほど時間を決めて調べ、それ以上かかるようであれば、以下のソースに質問を投稿してみましょう。