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的高度只有200像素，其余的50像素位于第一个div的内部，但是我想在第一个div的末尾开始第二个div？

Answer 1

您的第一个div位于fixed，这意味着它不在流程之列。因此，第二个div达到了顶峰。

您可以通过第一格的高度设置第二格的top：

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

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

1 个答案: