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

Question

我需要将SVG元素的顶部和底部与FlexBox项重叠，这样它们之间的空间就会消失。

我试过的是：

• 在FlexBox项中添加了z索引1，但这没有起到任何作用。
• 在SVG元素中添加了一个z-索引为-1，但这只会完全隐藏元素，这不是我想要的。

这是我的密码：

// 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元素之间的空间：

​

​

Answer 1

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

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

要使我的UI看起来像：

​

​

注意:我很清楚地知道，人们强烈建议只在实用程序或用户样式表中使用!important。但是我用来呈现SVG的库不允许我更改他们的样式表，所以我觉得这是一个合理的用例。