Question

我需要用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元素之间的空间：

Answer 1

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

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

使我的UI看起来像

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

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

1 个答案: