Comment empêcher les éléments absolus de se chevaucher en CSS ?

Chevauchement vertical des éléments absolus : une solution

Dans votre code HTML, vous avez défini deux lignes, #row1 et #row2, avec positionnement absolu. Le problème se pose car les éléments absolus sont supprimés du flux normal de documents et s'empilent les uns sur les autres, ce qui entraîne un chevauchement du contenu.

Pour résoudre ce problème, nous devons comprendre l'objectif et le comportement du positionnement absolu. En définissant un élément sur position : absolue ;, nous le supprimons du flux standard et le positionnons par rapport à son ancêtre positionné le plus proche.

Dans votre exemple, .row et .col1, .col2 sont des éléments absolus imbriqués dans .container, qui est également absolu. Cependant, comme les trois éléments sont absolus, ils deviennent tous indépendants et se chevauchent.

Pour résoudre ce problème, nous devons établir une hiérarchie de positionnement appropriée. Nous pouvons y parvenir en définissant .row sur un positionnement relatif. De cette façon, .col1 et .col2 resteront absolus, mais ils seront positionnés par rapport à .row, qui se trouve dans le flux de documents.

Ce changement permet à #row1 et #row2 de s'empiler verticalement, en respectant la normale comportement des éléments de bloc. Voici le CSS modifié :

body { position:relative; min-height: 2em; width: 100%; }
.container {position:absolute;}
.row {position:relative;}
.col1, .col2 {position: absolute;}

Cette modification conserve les propriétés de positionnement dont vous avez besoin tout en garantissant que #row1 et #row2 sont affichées l'une en dessous de l'autre comme prévu.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!