CSS

z-indexで重なり順を操作しよう

要素の重なり順を変更できるz-indexについて見ていきます。

  • z-index

z-index

・要素の重なり順を指定するz-indexについて見ていきます。

・まず昨日やった絶対配置で要素を固定していきます。親要素であるboxZのpositionをrelativeにしてboxA, B, Cに対してposition: absolute;を指定してあげます。

要素を絶対配置してみよう

・何も指定がない初期値の場合要素はあとから書かれたものが先頭に表示されるしようとなっています

・次にそれぞれの要素を重ね合わせたいので30pxずつずらした位置に絶対配置をしていきます。

・ここでz-ndexを使っていきます。このプロパティはそれぞれの要素に対して使用していき値は数字になります。値は大きいほうが上にきて小さくなるに連れ優先順位は低くなっていきます。

・なので例えばboxAに対してz-index: 3と指定しboxCに対してz-index: 1;と指定した場合boxAのほうが先頭に表示されます。

-広告-

 

 






-CSS