Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8582

z-index 使用方法

$
0
0

z-index プロパティ

要素の重ね順を指定できる。

位置が指定されている要素(position プロパティがstatic以外)の要素に対して有効。
position: absolute;とか指定されていればOK。

<divclass="red"></div><divclass="pink"></div>
.red{height:100px;width:100px;position:absolute;background-color:red;}.pink{height:100px;width:100px;position:absolute;left:20px;top:20px;background-color:pink;}

スクリーンショット 2019-11-18 17.33.41.png

z-index を指定していないので、後から記述したピンクボックスが前に重なっている。

.red{height:100px;width:100px;position:absolute;background-color:red;z-index:1;}.pink{height:100px;width:100px;position:absolute;left:20px;top:20px;background-color:pink;}

z-index: 1;を指定することによりレッドボックスが前に出る。
数が大きいほど手前になる。

スクリーンショット 2019-11-18 17.38.12.png


Viewing all articles
Browse latest Browse all 8582

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>