「CSS入門」 z-index プロパティで位置指定要素の順を定義する方法

2014年11月11日2020年10月19日

説明
z-index プロパティは、位置指定要素とその子孫要素、またはフレックスアイテムの z 順を定義します。
構文
1.キーワード値
z-index: auto;
2.integer値
z-index: 0;
3.グローバル値
z-index: inherit;
z-index: initial;
z-index: unset;
使用例
htmlコード

<div class="cftA">AA01
  <span class="cftB">BB02</span>
  <span class="cftC">CC03</span>
</div>

CSSコード

.cftA { 
  position: relative;
  z-index: 1;
  border: dashed;
}
.cftB { 
  position: absolute;
  z-index: 3; 
  background: yellow;
  width: 80%;
}
.cftC { 
  position: absolute;
  z-index: 2;
  background: red;
}