[CSS] z-index プロパティの使い方
説明
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%; }