reactjs - 第二个 flex 元素的背景颜色也适用于第一个元素？

Question

<div style={{ display: 'flex', flexDirection: 'column' }}>
    <div style={{ zIndex: 1050, height: '50px', position: 'fixed', width: '100%'}}>
    </div>
    <div style={{ position: 'relative' ,height: '250px', backgroundColor: 'green' }}>
    </div>
</div>

背景颜色绿色应用于两个内部 div，但我不希望第一个内部 div 的背景颜色为绿色？

Answer 1

这是因为第一个div是固定的，背景是透明的。尝试向第一个 div 添加背景颜色:

<div style={{ display: 'flex', flexDirection: 'column' }}>
    <div style={{ zIndex: 1050, height: '50px', position: 'fixed', width: '100%', backgroundColor: 'white'}}>
    </div>
    <div style={{ position: 'relative' ,height: '250px', backgroundColor: 'green' }}>
    </div>
</div>

或者，您可以将第二个 div 的 margin-top 设置为 50px(第一个 div 的高度)