Quel est le principe du positionnement relatif ?

Le principe du positionnement est d'affiner la position de l'élément dans le flux normal de documents en modifiant l'attribut position de l'élément. Lorsqu'un élément est défini sur un positionnement relatif, il se déplace par rapport à sa position dans le flux de documents normal. Le positionnement relatif utilise les attributs haut, droite, bas et gauche pour décaler la position de l'élément, et ce décalage affecte uniquement le positionnement relatif. l'élément lui-même et ses éléments qui se chevauchent, mais n'affecte pas la disposition des autres éléments. Le positionnement relatif ne modifie pas l'ordre d'empilement des éléments ; les éléments restent dans leur position dans le flux normal des documents.

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

Le positionnement relatif est une méthode de positionnement CSS qui nous permet d'affiner un élément par rapport à sa position dans le flux normal de documents. Le principe du positionnement relatif est réalisé en modifiant l'attribut position de l'élément.

En CSS, l'attribut position d'un élément peut avoir plusieurs valeurs, notamment statique, relative, fixe et absolue. Le positionnement relatif est obtenu en définissant l'attribut position de l'élément sur relatif.

Lorsqu'un élément est défini sur un positionnement relatif, il se déplace par rapport à sa position dans le flux normal du document. Un élément est déplacé par rapport à sa position dans le flux de documents normal sans affecter la disposition des autres éléments.

Plus précisément, le principe du positionnement relatif peut être résumé comme suit :

Position initiale de l'élément : Lorsqu'un élément est mis en positionnement relatif, sa position initiale est cohérente avec sa position dans le flux normal du document .

Décalage de position : En utilisant les attributs haut, droite, bas et gauche, nous pouvons décaler la position des éléments positionnés relativement. Ces propriétés nous permettent de spécifier le décalage d'un élément par rapport à sa position dans le flux de documents normal. , définir top sur 10px déplacera l'élément vers le bas de 10 pixels.

Portée d'influence du décalage : le décalage de positionnement relatif n'affectera que l'élément lui-même et les autres éléments qui se chevauchent, et n'affectera pas la disposition des autres éléments. Il s'agit d'une différence entre le positionnement relatif et le positionnement absolu. Le décalage du positionnement absolu affecte la disposition des autres éléments.

Ordre d'empilement des éléments : le positionnement relatif ne modifie pas l'ordre d'empilement des éléments, et les éléments conservent toujours leur position dans le flux normal de documents. Si l'ordre d'empilement des éléments doit être modifié, la propriété CSS z-index peut être utilisée.

Résumé

Le principe du positionnement relatif est d'affiner la position de l'élément dans le flux normal de documents en modifiant l'attribut de position de l'élément. En utilisant les attributs top, right, bottom et left, vous pouvez décaler la position de l'élément, et ce décalage n'affectera que l'élément lui-même et ses éléments qui se chevauchent, et n'affectera pas la disposition des autres éléments. Le positionnement relatif ne modifie pas l'ordre d'empilement des éléments. Si vous devez modifier l'ordre d'empilement, vous pouvez utiliser l'attribut z-index.

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!