Цвет фона второго элемента 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>

Зеленый цвет фона применяется к обоим внутренним элементам, но я не хочу, чтобы первый внутренний элемент имел зеленый цвет фона?

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>

В качестве альтернативы вы можете установить margin-top на втором 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"/>