2018年09月20日(木)

【CSS】 重なり順を指定するz-indexの使い方！効かないときの対処法と注意点も

• 0
• 18
• 16
• 55

「z-indexプロパティ」と聞くと、面倒くさいと顔をしかめる人もいるのではないでしょうか？「要素の順位を決めるプロパティであることはわかっている。でも、思い通りの順位にならないじゃないか」と感じたことはありませんか？

CSSの「z-index」は癖の強いプロパティです。単純な設定は問題なくても、複雑な設定になった途端、思い通りの挙動にはなりません。positionプロパティを使う人であれば、頻度高く使用するのが「z-indexプロパティ」ですが、理屈を知る必要があります。ここでは、その理屈を勉強しましょう。読み終わったら、「z-index」の使い方が理解できていることでしょう。

CSSの「z-indexプロパティ」とは

例えば、「positionプロパティ」を使用して、要素同士が重なった時に、その要素の順番を指定するCSSプロパティです。