ホームページ制作・システム構築なら
株式会社Omit

SVGファイルを扱う際、要素の重なり順を変更したいと思ったことはありませんか？私もその一人で、最初はCSSのz-indexを使ってみましたが、うまくいきませんでした。

CSS（z-index）ではできない理由

SVGファイルはHTMLとは異なり、z-indexプロパティを使って要素の重なり順を指定することができません。これはSVGがベクター画像を表現するためのXMLベースの形式であり、HTMLとは異なるためです。

SVGファイル内の重なり順は下に書いた要素が上に重なる

SVGファイル内では、通常は下に書かれた要素が上に重なって表示されます。これは、SVGが描画される際に上から下に向かって要素が積み重なる仕様になっているためです。

兄弟要素の順番を入れ替えることで重なり順を変えることができる

SVGファイル内の要素の重なり順を変えたい場合は、兄弟要素の順番を入れ替えることで実現することができます。具体的には、要素を上に移動させるために、その要素を他の要素よりも後に記述することで、重なり順を変えることができます。

まとめ

• SVGファイル内の要素の重なり順を変えるには、CSSのz-indexを使うことはできません。
• SVGファイル内では下に書かれた要素が上に重なる仕様になっています。
• 重なり順を変えたい場合は、兄弟要素の順番を入れ替えることで実現することができます。

SVGファイルを扱う際は、このような特性を理解しておくと便利ですね！