Pourquoi l'élément parent doit-il définir sa position ?

L'élément parent définit la position pour contrôler le positionnement et la disposition de ses éléments enfants. Différentes valeurs ont des utilisations différentes : 1. statique, qui permet aux éléments d'être disposés selon le flux normal du document et n'est pas affecté par d'autres attributs de positionnement 2. relatif, qui crée un conteneur relativement positionné pour envelopper les éléments enfants et le contrôle ; eux Layout; 3. Absolute, crée un conteneur à position absolue, utilisé pour contrôler le positionnement précis des éléments enfants 4. Fixe, crée un conteneur à position fixe, utilisé pour créer un élément fixe sur la page, etc.

Le système d'exploitation de ce tutoriel : système Windows 10, ordinateur Dell G3.

Le but de la définition de l'attribut position d'un élément parent est de contrôler le positionnement et la disposition de ses éléments enfants. L'attribut position peut être utilisé pour modifier la méthode de positionnement des éléments. Les valeurs courantes incluent statique, relative, absolue et fixe.

1. static :

static est la valeur par défaut de l'attribut de position. Les éléments sont disposés selon le flux normal du document et ne sont pas affectés par d'autres attributs de positionnement. Si l'élément parent ne définit pas l'attribut position, le positionnement des éléments enfants sera également disposé selon le flux normal du document, c'est-à-dire que les éléments enfants seront disposés selon leur ordre en HTML.

2. relatif :

Lorsque l'élément parent définit l'attribut position sur relatif, le positionnement de l'élément enfant peut être décalé par rapport à l'élément parent en définissant les attributs haut, droite, bas et gauche. Cette méthode de positionnement ne modifie pas la position de l'élément enfant dans le flux de documents, mais est décalée par rapport à l'élément parent.

Un scénario d'application courant pour définir position:relative sur un élément parent consiste à créer un conteneur relativement positionné pour envelopper les éléments enfants et contrôler leur disposition. En définissant les attributs haut, droit, bas et gauche de l'élément enfant, le positionnement et la disposition de l'élément enfant par rapport à l'élément parent peuvent être obtenus.

3. absolu :

Lorsque l'élément parent définit l'attribut position sur absolu, le positionnement de l'élément enfant peut être décalé par rapport à son élément ancêtre positionné le plus proche. S'il n'y a aucun élément ancêtre positionné, le positionnement des éléments enfants est décalé par rapport au bloc contenant d'origine du document.

Un scénario d'application courant pour définir position:absolute sur un élément parent consiste à créer un conteneur positionné de manière absolue pour contrôler le positionnement précis des éléments enfants. En définissant les attributs top, right, bottom et left de l'élément enfant, vous pouvez obtenir un positionnement précis de l'élément enfant par rapport à l'élément parent ou au bloc contenant initial du document.

4. fixe :

Lorsque l'élément parent définit l'attribut position sur fixe, le positionnement de l'élément enfant sera décalé par rapport à la fenêtre du navigateur. Cette méthode de positionnement ne changera pas avec le défilement et les éléments enfants resteront toujours dans une position fixe.

Un scénario d'application courant pour définir position:fixed sur un élément parent consiste à créer un conteneur à position fixe pour créer un élément fixe sur la page, tel qu'une barre de navigation ou une boîte flottante.

Résumé :

Le but de la définition de l'attribut position d'un élément parent est de contrôler le positionnement et la disposition de ses éléments enfants. Vous pouvez modifier la façon dont un élément enfant est positionné par rapport à son élément ou document parent en définissant l'attribut position sur relatif, absolu ou fixe. Ce procédé de positionnement peut obtenir un positionnement relatif, un positionnement absolu ou un positionnement fixe de sous-éléments, obtenant ainsi un effet de disposition plus flexible.

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!