z-indexの使い方

今回はz-indexの使い方を説明します!!

 

 

□z-indexとは?

z-indexはボックスの重なりの順序を指定する際に使用します。

 

 

□使用条件

positionプロパティでstatic以外の値が指定されている要素に適用されます。

 

□使い方

優先したい要素に高い数字をつけてあげる。

 

□例

1,z-index: 5;

2,z-index: 4;

3,z-index: 3;

4,z-index: 2;

5,z-index: 1;

 

上記の場合だと5,が一番優先されて表示されます。

逆に1,を優先したい場合は1,にz-index:5;とすることで1,が優先されて表示される

 

 

□注意点

positionをつけるのを忘れずに。

つけ忘れてしまうと表示されません。