Comment empiler verticalement des éléments positionnés de manière absolue sans supprimer le positionnement absolu/relatif ?-tutoriel CSS-php.cn

Comment empiler verticalement des éléments positionnés de manière absolue sans supprimer le positionnement absolu/relatif ?

Susan Sarandon

Libérer： 2024-12-25 07:54:12

original

614 Les gens l'ont consulté

How to Stack Absolutely Positioned Elements Vertically Without Removing Absolute/Relative Positioning?

Dilemme de positionnement : éléments superposés avec positionnement absolu

Dans la conception Web, l'utilisation du positionnement absolu peut être utile pour créer des dispositions d'éléments spécifiques. Cependant, cela peut également poser des problèmes, en particulier lorsque vous essayez d'empiler des éléments les uns après les autres verticalement.

Considérez l'extrait CSS suivant :

body {
  position: relative;
  min-height: 2em;
  width: 100%;
}

.container {
  position: absolute;
}

.row {
  position: relative;
}

.col1,
.col2 {
  position: absolute;
}

Copier après la connexion

Et le code HTML correspondant :

<body>
  <div class="container">
    <div>

Copier après la connexion

Avec cette configuration, l'intention est d'avoir les deux éléments .row empilés verticalement, plutôt que de se chevaucher comme ils le font actuellement. Comment y parvenir sans supprimer les propriétés de positionnement absolues/relatives ?

Comprendre le positionnement CSS

Pour trouver une solution, il est important de comprendre les différents types de positionnement CSS :

statique : Les éléments circulent normalement dans le document mise en page.
relatif : les éléments se déplacent en fonction des décalages en haut, à droite, en bas et à gauche, mais restent dans le flux du document.
absolu : Les éléments sont supprimés du flux de documents et positionnés par rapport à leur ancêtre positionné le plus proche (et non à leur parent).
fixe : les éléments sont supprimés du flux de documents et positionnés par rapport à la fenêtre d'affichage, défilant avec la page.

Le problème avec des éléments qui se chevauchent

Dans notre exemple, le .row et Les éléments .col sont positionnés de manière absolue. Cela signifie qu’ils sont retirés du flux normal de documents et empilés les uns sur les autres. Pour résoudre ce problème, nous devons trouver un moyen de les conserver dans le flux de documents tout en conservant le positionnement absolu à des fins de mise en page spécifiques.

La solution : la double imbrication

Une solution peu orthodoxe mais efficace consiste à créer un deuxième élément conteneur qui positionne les lignes de manière absolue :

<body>
  <div class="container">
    <div class="inner-container">
      <div>

Copier après la connexion

.container {
  position: relative;
  min-height: 2em;
  width: 100%;
}

.inner-container {
  position: absolute;
}

.row {
  position: relative;
}

.col1,
.col2 {
  position: absolute;
}

Copier après la connexion

Avec cette double imbrication, le .inner-container agit désormais comme l'ancêtre positionné le plus proche pour les éléments .row. En conséquence, les lignes s'empilent verticalement, préservant la disposition d'origine tout en résolvant le problème de chevauchement.

Remarque : Cette solution maintient le positionnement absolu à d'autres fins de disposition tout en obtenant l'empilement vertical souhaité des éléments. Cependant, il n'est pas recommandé pour un usage général et doit être utilisé en dernier recours lorsque la suppression du positionnement absolu/relatif n'est pas une option.

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!