表的相对和绝对定位

Question

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

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

我测试绝对定位（z-index和顶部和左侧）但是当您更改浏览器的大小或更改屏幕分辨率时，绝对定位表会将我喜欢的位置丢失到其他静态表中。

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

Answer 1

我认为这不是相对位置或绝对位置的问题。为了使2个表/ div可以重叠，应该使用负余量。为了在更改浏览器的大小或屏幕分辨率时布局看起来有弹性，您必须使用％作为表/ 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;}

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

这是另一个使用相对位置的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上与其他单位进行测试。