css z-indexとtranslateY を同時に使うとうまくいかない。

一緒に使わない書き方をすれば、この問題は一発で解決するけど、
原因がわからずに少し詰まったのでメモしておく。

サンプルコード

html

<ul>
    <li>text1<span>remove</span></li>
    <li>text2<span>remove</span></li>
</ul>

scss(css)です。

css

ul {
    li {
        transform: translateY(30px);
        width: 100%;
        position: relative;
        span {
            position: absolute;
            width: 50px;
            height: 20px;
            top: 100%;
            left: 0;
            z-index: -1;
            opacity: 0;
            background: red;
        }
        &:hover span {
                z-index: 1;
                opacity:1;
            }
    }
}

やりたかったこと。

liをhover したときにspan要素を表示させる。
上記コードの場合うまくいかない。

translateY を削除すると期待通りの動きになった。

上記cssコードからtransform: translateY(30px);を削除したら、期待している動きになった。
削除というか、translateY使いたい場合、ulにtransformを当てれば良い。