HTMLz-indexとは?z-indexは要素の重なり順を指定するCSSのプロパティです。通常では後に記述されたものが画面では手前に配置されますが、z-indexを使用することによって自由に優先順位を設定することができます。z-index:数字;で指定した値が大きい要素ほど上に表示されます。数字には整数を入れます。absoluteで要素が重なっているときに使うことが多いです。「要素が重なるときに使うもの」と理解しておくと良いです。【z-indexは以下のように記述します。数字;}以下でz-indexの指定方法をみていきましょう。⬆︎何も指定しないと、後ろに書かれた要素が上に重なります。z-index指定ありこの重なり順をz-indexで変えてみましょう。1番目の要素には30、2番目には20、3番目には10と指定してみます。⬆︎z-indexの値が大きい要素ほど上に配置されました。このように下に隠れてしまっている要素を上に持ってくることができるのですね。staticの要素には使えないです。私も始めハマってしまいました(笑)。positionプロパティの初期値であるstaticではz-indexを指定できません。言い換えるとpositionで何も指定していない限り、z-indexは使えないと言うことです。「z-indexが効かない」というときははじめにここを確認してみましょう。【例1:効かない例】さきほどと同じように1番目〜3番目の要素を作ります。1番目の要素に対してはpositionを何も指定しておらず、初期値のstaticとなっています。※1番目にpositionを指定していない状態です。⬆︎「1番目」のz-indexは「3番目」よりも大きいにも関わらず背面に配置されています。z-indexを指定したい要素のpositionをrelative、absolute、fiexedのどれかにするだけです。今の要素位置を変えたくない場合は、relativeにしましょう。⬆︎要素に対してrelativeに指定すれば重なり順が指定できるようになります。指定できる値は?z-indexではかなり幅広い値を指定することができます。最小値:-123456789最大値:123456789整数のみ:小数点はNGマイナスの値を指定することもできます。基本的に何も指定していない場合はz-index:0になります。そのためマイナスの値にすると、何も指定していない要素よりも下に配置されます。z-indexの使い方このようにz-indexを使うことで要素を任意の順番に指定することが可能になります。他のCSSとも組み合わせて使用できるので便利だと思います。他にもHTML、CSSには多くの要素があります。これからもHTML、CSSについて記事を掲載していきます。コメントをキャンセルメールアドレスが公開されることはありません。*サイト上に表示された文字を入力してください。technology.。