第二个弹性项目的背景色也应用于第一个项目?

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 的顶部边距设置为 50px(第一个div 的高度(

Answer 2

第一个元素具有{position: 'fixed'}规则。这意味着第二个将重叠它。
最重要的是，它的背景颜色是透明的(默认情况下(。

请参阅不同颜色的示例：

const Example = () => (
<div style={{ display: 'flex', flexDirection: 'column' }}>
<div style={{ zIndex: 1050, height: '50px', position: 'fixed', width: '100%', backgroundColor: 'red'}}>
</div>
<div style={{ position: 'relative' ,height: '250px', backgroundColor: 'green' }}>
</div>
</div>
);
ReactDOM.render(<Example/>, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"/>