css - 如何使FlexBox元素与SVG元素重叠？

我需要用FlexBox项将SVG元素的顶部和底部重叠，以使它们之间的空间消失。

我尝试过的


向FlexBox项添加了1的z-index，但没有执行任何操作。
向SVG元素添加了-1的z-index，但这仅完全隐藏了该元素，这不是我想要的。


这是我的代码：

// Lottie returns an SVG with class wrapper.

const defaultOptions = {
        loop: false,
        autoplay: true,
        animationData: balanceData.default,
        rendererSettings: {
                preserveAspectRatio: 'xMidYMid slice',
                className: 'wrapper'
        }
};

// home.js

<div className="message">
        <div className="txt-1">Find
        </div>

        <Lottie options={defaultOptions}
                height={510}
                width={310}
        />

        <div className="txt-2">with your</div>
        <div className="txt-3">body & mind.</div>

    

// home.css

.message {
        font-family: 'Roboto', sans-serif;
        font-size: 6em;
        align-items: center;
        display: flex;
        padding-left: 60px;
        padding-top: 60px;
        flex-direction: column;
}

.txt-1 {
        opacity: 0;
        animation-name: txt-1;
        animation-duration: 2s;
        animation-delay: .5s;
        animation-fill-mode: forwards;
        display: flex;
        align-items: center;
}

.wrapper {
        z-index: 1;
}

@keyframes txt-1 {
        0% {
                opacity: 0;
        }
        100% {
                opacity: 1;
        }
}

.txt-2 {
        opacity: 0;
        animation-name: txt-2;
        animation-duration: 1.5s;
        animation-delay: 1s;
        animation-fill-mode: forwards;
}

@keyframes txt-2 {
        0% {
                opacity: 0;
        }
        100% {
                opacity: 1;
        }
}

.txt-3 {
        opacity: 0;
        animation-name: txt-3;
        animation-duration: 2s;
        animation-delay: 1.5s;
        animation-fill-mode: forwards;
}

@keyframes txt-3 {
        0% {
                opacity: 0;
        }
        100% {
                opacity: 1;
        }
}

再次，我想要的是隐藏FlexBox项和SVG元素之间的空间：

最佳答案

弄清楚了！只需从align-items: center;删除.message并将以下内容添加到.wrapper：

.wrapper {
   padding-left: 5%;
   width: 90% !important;
   display: flex !important;
}

使我的UI看起来像：



注意：我很清楚，强烈建议仅在实用程序案例或用户样式表中使用!important。但是我用来渲染SVG的库不允许我更改其样式表，因此我觉得这是一个合理的用例。