[CSS] z-index プロパティの使い方

2014年8月23日2021年8月20日

説明
z-index プロパティは、位置指定要素とその子孫要素、またはフレックスアイテムの z 順を定義します。より大きな z-index を持つ要素はより小さな要素の上に重なります。
構文
z-index: auto
z-index: integer型の値
z-index: inherit;
z-index: initial;
z-index: unset;
使用例1

kk {
  background:url(../img/t001.png) no-repeat 50% 50% #ffffff;
  position:relative;
  border-bottom:solid thin #cccccc;
  z-index:100;
}

使用例2

htmlコード

<div class="Aa">AAA
  <span class="Bb">テストデータAA</span>
  <span class="Cc">テストデータBB</span>
</div>

CSSコード

Aa {
  position: relative;
  z-index: 11;/*重なり順:3番目 */
  border: dashed;
  height: 8em;
}
.Bb {
  position: absolute;
  z-index: 33; /*重なり順:1番目 */
  background: gold;
  width: 80%;
}
.Cc {
  position: absolute;
  z-index: 23; /*重なり順:2番目 */
  background: lightgreen;
  width: 20%;
 
}