Question

fork()

两个内部div都应用了绿色，但是我不希望第一个内部div具有绿色的背景色？

Answer 1

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

查看具有不同颜色的示例：

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"/>

Answer 2

这是因为第一个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的高度）

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

2 个答案: