css - 如何在第一个 div 的末尾开始第二个 div。？

Question

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

第二个内部 div 高度只有 200px，剩余的 50px 在第一个内部 div 内，但我想在第一个 div 的末尾开始第二个 div？

Answer 1

您的第一个 div 位于 fixed ，这意味着它在流程之外。因此第二个 div 被推到顶部。

您可以将第二个 div 的 top 设置为第一个 div 的高度:

const Example = () => (
  <div style={{ display: 'flex', flexDirection: 'column' }}>
      <div style={{ zIndex: 1050, backgroundColor: '#fafafb', height: '50px', position: 'fixed', width: '100%'}}>
      </div>
      <div style={{ position: 'relative', top: '50px' ,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" />