.svgにtransform: translateY(1px)をすると上に重ねた画像が隠れてしまいます。

Question

実現したいこと

svgの上にimg画像を重ねたいが、隠れてしまいます。z-indexは他の場所に影響を与えてしまうのでなるべく使いたくありません。

前提

お世話になります。
とても不思議なのですが、同じように書いているにも関わらず、波線が上向きのパターンと波線が下向きのパターンの画像の表示が違ってくるのです。
上向きの波線の時は花が隠れてしまうのです。

波線が上向きのパターン

 <div class="top-decorative-image">
      <img class="decorative-pic flower-pic" src="img/deco01.png" alt="">
 </div>

 <div class="top-faq-svg top-faq-svg--top">
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
               //省略しています。
     </svg>
 </div>

波線が下向き

<div class="top-faq-svg top-faq-svg--bottom">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
         //省略しています。
      </svg>
 </div>
<div class="top-decorative-image">
     <img class="decorative-pic leaf-pic" src="img/deco05.png" alt="">
</div>

.top-faq-svg--top {
    transform: translateY(1px);    //違うのはここのみ
  }
.top-faq-svg--bottom {
    transform: translateY(-1px);  //違うのはここのみ
  }

  top-faq-svg svg {
    width: 100%;
    height: auto;
  }

試したこと

①最初は花の画像にのみz-indexを書いたのですがそうすると他の場所に影響を与えてしまいます（ハンバーガーメニューの上に花の画像が表示されてしまう）

②順番が逆なのが良くないのかと、svgとimgの順番を変えてみたりしましたが関係はなさそうでした。

でも結局はtransform: translateY(1px)を削除すると花の画像がsvgの上に乗っかるのが分かりました。
たしかに(1px)と(-1px)の違いはあるのですが、 私の認識ではtransformは場所の移動だけでz-index のような意味はないと思っています。
試しに葉っぱの方のtransform: translateYを(1px)に変更してみたのですが、葉っぱが隠れることはありませんでした。
なぜこのような現象になるのか不思議でなりません。
どなたかお分かりになりますでしょうか？
長くなり申し訳ありません。
よろしくお願いします。

補足情報（FW/ツールのバージョンなど）

表示させてみたのはchromeのみです。

Comments

[Lhankor_Mhy]

このCSSですと、そもそも重ならないのでは……？

[Lhankor_Mhy]

ご提示のコードに加えて、画像を重ねるようにいろいろ追加してみたところ、問題が再現しませんでした。
『順番が逆なのが良くないのかと、svgとimgの順番を変えてみたりしましたが関係はなさそう』とのことですが、jpgとsvgの順番を入れ替えてみると、重なり方が変わりました。

ご提示いただいていない部分に原因がありそうです。

Answer 1

transform を指定するとその要素専用の重ね合わせコンテキストが作られて、元々属していた重ね合わせコンテキストよりも手前に描画されるようになります。

どのように対処すべきかは HTMLとCSSの全体と設計意図を見てみないと正確にはわかりませんが、最初に試すことはやはり花画像でも重ね合わせコンテキストを作るようにして、花画像とSVGのz-indexで調整ですね。

Comments

[asada88]

度々目にするコンテキスト・・。
今まで見なかったふりをしてきましたが意味合いを調べてみました。
やはりtransformにはいうなればz-indexのような挙動をするということですよね？
どうしてもz-indexを使いたくないので、これは根本的に見直さないということでした。
回答していただき本当にありがとうございました！

Answer 2

imgとsvgの出現順の問題では？

参考

<style>
.wrap{
position:relative;
height:200px;
}
.top-decorative-image{
position:absolute;
}
.top-faq-svg--top {
animation:trans 1s infinite;
position:absolute;
}
.top-faq-svg--bottom {
animation:trans 2s infinite;
position:absolute;
}
@keyframes trans{
  from{transform: translateY(100px);}
  50%{transform: translateY(0px);}
  to{transform: translateY(100px);}
}
</style>
<div class="wrap">
  <div class="top-faq-svg top-faq-svg--top">
    <svg width=200 height=200>
    <circle cx=150 cy=150 r=50 fill=blue />
    </svg>
  </div>
  <div class="top-decorative-image">
    <img src="https://placehold.jp/ff0000/00ffff/150x150.png?text=1">
  </div>
  </div>
</div>
<div class="wrap">
  <div class="top-decorative-image">
    <img src="https://placehold.jp/ffff00/0000ff/150x150.png?text=2">
  </div>
  <div class="top-faq-svg top-faq-svg--bottom">
    <svg width=200 height=200>
    <circle cx=150 cy=150 r=50 fill=green />
    </svg>
  </div>
</div>
<div class="wrap">
  <div class="top-decorative-image">
    <img src="https://placehold.jp/ff00ff/00ff00/150x150.png?text=3">
  </div>
</div>

※調整
先に設定したものが下にくる

Comments

[asada88]

わざわざコードを書いていただきありがとうございます！！
とても楽しく拝見しました。
そしてなるほどでした・。
私の方でもsvgとimgを入れ替えてみたのです。確かに波線の上には花がきたのですが、今度は上記の図に少し見えている黄色の部分(section)の中に花の茎が隠れたままなのです。（現在の順番svg→img→section）
サイトの色々な場所にimg画像を散らしたく、おきたい場所の近くにhtmlを書いていたのですが、先に設定したものが下にくる。をふまえて、おきたい場所にimg画像を置くのではなく、html上で一番最後に書くことにしました。（svg→section→imgという感じで）
topの数値が−950pxと大きくはなってしまうのですが・・。
丁寧な回答を本当にありがとうございました。