如何在第一个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的高度来设置第二个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" />