z-indexとは？素敵なサイト作ってみたいCSSの勉強

なんとなくz-indexを見かけたことはあるけれど、特に使ったことがなかったのですが、おしゃれな使い方を見かけたので私も作ってみたいということで備忘録です。おしゃれとは無縁な使い方のみの解説です。

Contents

z-indexとは

z-indexは重なり順を決める際に使用します。数値が高いほうが上に重なります。

Photoshopなど使ったことがある人はレイヤーをイメージするとわかりやすいと思います。

以下Codepenのサンプルではz-indexの値を切り替えて上下を入れ替えています。

See the Pen zindex by Nakamoto (@programmerlife) on CodePen.

class1 {
    position: absolute;
    left: 35px;
    top: 10px;
    z-index: 1;
}

z-indexには数値またはautoが入ります。autoはデフォルト値です。

ついでにJavascriptの取得方法です。

z-indexは以下で取得可能です。

object.style.zIndex

上記のcodepenの例です。

let div1 = document.querySelector(‘.class1’) ;
if(div1.style.zIndex == 1){
div1.style.zIndex = -1;
}else{
div1.style.zIndex = 1;
}

実際の使い方はアイディア勝負できっといろいろできると思いますが、こんな使い方ができるよという参考程度のものを作ってみました。

z-indexを使えばアイディア次第でなにか作れそうですね。
普段からサイトを開発者モードで見てみると良いアイディアが集められそうだなと思いました。