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

実現したいこと

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のみです。