Как предотвратить наложение элементов при увеличении / уменьшении на CSS? - PullRequest
0 голосов
/ 15 апреля 2020

Я новичок в CSS, и у меня есть несколько элементов, показанных ниже. Когда я zoom in/out страница, я обнаружил, что элементы перекрываются друг с другом. По сути, у меня есть 2 div для хранения Button/ Input Field и 2 div для хранения table. Как я могу предотвратить это с помощью CSS?

DOM:

<div id='itemBar1' style={{verticalAlign: 'baseline',  position:'static', zIndex:"999", height:"5%"}} >
  <div style={{padding:"5px 5px 5px 10px", float: "left"}} >
    <Button>
  </div>
</div>

<div id="table1" style={{verticalAlign: 'baseline', height:"50%", position:'static'}}>
  <Table Component>
</div>

<div id='itemBar2' style={{verticalAlign: 'baseline', position:'static',  height:"5%"}}>
</div>

<div id="table2" style={{verticalAlign: 'baseline', height:"40%", position:'static'}}>
  <Table Component>
</div>
...