Positionnement relatif et absolu des tables

Question

Je cherche un moyen de chevaucher une table sur une autre, mais avec une condition.

Lorsque vous modifiez la taille du navigateur ou que vous modifiez la résolution de l'écran, chaque positionnement doit être correct. Je teste le positionnement absolu (z-index et haut et gauche) mais quand vous changez la taille du navigateur ou que vous changez la résolution de l'écran, la table de positionnement absolu perd ma position favorite dans une autre table statique. Je teste le positionnement relatif (z-index et haut et gauche) et quand vous changez la taille du navigateur ou vous changez la résolution de l'écran tout va bien mais nous avons réservé de l'espace pour la table relative. Comment puis-je supprimer cela?

Answer 1

Je pense que ce n'est pas un problème de position relative ou de position absolue. Pour que 2 tables/divs puissent se chevaucher, il faut utiliser une marge négative. Pour que la mise en page soit élastique lorsque vous modifiez la taille du navigateur ou la résolution de l'écran, vous devez utiliser% comme unité de largeur pour les tables/divs. Voici un exemple

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;} 

L'autre façon est d'utiliser la position supérieure par rapport à obtenir l'effet de chevauchement. Et puis la position devrait être soit relative ou absolue, mais des mathématiques différentes pour calculer la valeur de la position supérieure négative. Il est facile de comprendre pour utiliser la position relative.

Voici un autre CSS utilisant la position relative.

.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} 

La clé utilise donc% comme unité de largeur. Vous pouvez faire un test avec d'autres unités sur this page.