CSSにおけるZ軸方向の要素重なり

このレッスンでは、Z軸方向の要素の重なりについて検討します。 デフォルトでは、2つの要素が互いに重なる場合、 HTMLコード内で後に来る要素が前面に表示されます。

例を見てみましょう。絶対位置指定され、 互いに重なるように配置された2つの要素があるとします。 この場合、HTMLコード内で後に来る要素が前面に表示されます：

html<div id="elem1"></div>
<div id="elem2"></div>

css#elem1 {
  position: absolute;
  top: 30px;
  left: 30px;
  
  width: 100px;
  height: 100px;
  background: #ff8888;
}

#elem2 {
  position: absolute;
  top: 60px;
  left: 60px;
  
  width: 100px;
  height: 100px;
  background: #7e89eb;
}

Результат: