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

Question

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

我尝试过的:

• 为 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 元素之间的空间:

Answer 1

想通了!只需从 .message 中删除 align-items: center; 并将以下内容添加到 .wrapper:

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

让我的 UI 看起来像:

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