CSS GRIDを勉強してみる(5) - コンテンツの重なり

スタートはこの状態から。

グリッドアイテムは同じセルを占有することができる。つまり、重なってもいい。重ねてみる。

今、わざと各コンテンツの背景色の透過度opacityを0.5にしてあるので、重なっているのがよくわかる。 しかし、これだとどちらが上にあるかわからないのでopacityの指定を外す。

box3が上に来ていることがわかる。

HTMLを修正して、box1が後から記述されるようにする。

<div class="wrapper">
  <div class="box3">Three</div>
  <div class="box1">One</div>
  <div class="box2">Two</div>
  <div class="box4">Four</div>
  <div class="box5">Five</div>
</div>

すると、box1が上に来る。

この順番を入れ替えたかったら、z-indexを指定するとよい。