css - 表的相对和绝对定位

Question

我正在寻找一种将表格重叠在另一个表格上的方法，但有条件。

当您更改浏览器的大小或更改屏幕分辨率时，每个位置都应该没问题。

我测试了绝对定位(z-index 和顶部和左侧)，但是当您更改浏览器的大小或更改屏幕分辨率时，绝对定位表会失去我最喜欢的位置，变成其他静态表。

我测试了相对定位(z-index 和顶部和左侧)，当您更改浏览器的大小或更改屏幕分辨率时，一切都很好，但我们为相对表保留了空间。我怎样才能删除它？

Answer 1

我认为这不是相对位置或绝对位置的问题。为了使 2 个表格/div 可以重叠，应该使用负边距。为了在您更改浏览器的大小或屏幕分辨率时布局看起来有 flex ，您必须使用 % 作为表格/div 的宽度单位。这是一个例子

HTML

<div class="table1"></div>
<div class="table2"></div>

CSS

.table1{width:80%; height:200px; background-color:#cfcfcf;margin: 0px auto;}  
.table2{width:60%; height:200px; background-color:#fffae4;margin:-20px auto 0;}

另一种方式是使用相对top position来达到重叠的效果。然后位置应该是相对的或绝对的但不同的数学来计算负顶部位置的值。使用相对位置很容易理解。

这是另一个使用相对位置的 CSS。

.table1{position:relative; width:80%; height:200px;background-color:#cfcfcf;top:10px;margin:0 auto}  
    .table2{position:relative; width:60%; height:200px; background-color:#fffae4;top: -20px;margin:0 auto}

所以关键是使用 % 作为宽度的单位。您可以在this page上与其他单位进行测试.