Positionnement relatif

Définissez l'attribut position de l'élément à relative, et sa disposition est la même que l'élément static. La boîte rendue se déplace ensuite verticalement sur la base des attributs top ou bottom, et / ou horizontalement sur la base des attributs left ou right. Les propriétés top, right, bottom, left et left: 20px sont utilisées pour spécifier la distance que la boîte se déplace après le rendu. Une valeur positive indique que la boîte s'éloignera de cette position et dans la direction opposée. Par exemple, right: -20px déplacez la boîte vers la droite de 20 pixels. L'application d'une valeur négative dans la direction opposée atteindra le même effet: left: 20px aura le même effet que auto. La valeur initiale de ces propriétés est left, ce qui rend la valeur calculée 0 (zéro) - c'est-à-dire aucun mouvement ne se produit. De toute évidence, il n'a pas de sens de spécifier right et left pour le même élément, car la position sera surcongelée. Si la direction du contenu est de gauche à droite, la valeur right est utilisée et le right sera ignoré. Dans la direction de droite à gauche, la valeur top "gagne". Si les deux bottom et top sont spécifiés, bottom est utilisé et

sera ignoré. Étant donné que seule la boîte rendue se déplace lorsqu'elle est par rapport aux éléments de positionnement, ce schéma de positionnement n'est pas pratique pour disposer des colonnes de contenu. Le positionnement relatif est souvent utilisé dans les cas où une boîte doit être déplacée plusieurs pixels, bien qu'elle puisse également être utilisée en conjonction avec des marges négatives sur les éléments flottants pour des dispositions plus complexes.

Le contrôle contient le bloc

position Un effet secondaire du positionnement relatif est très pratique: l'élément de positionnement relatif est "localisé", ce qui signifie qu'il devient un bloc d'inclusion pour tout descendants de positionnement absolu. Cela nous donne un outil facile à utiliser pour contrôler où le bloc est inclus: il suffit de définir relative sur

sans déplacer la boîte elle-même.

FAQ sur le positionnement relatif de CSS

Quelle est la différence entre le positionnement relatif et le positionnement absolu du CSS?

position Dans CSS, l'attribut position est utilisé pour spécifier le type de méthode de positionnement de l'élément. Il existe cinq valeurs différentes de static: relative, fixed, absolute, sticky,

et

. Le positionnement relatif et le positionnement absolu sont les deux méthodes les plus couramment utilisées. top right Le positionnement relatif fait référence au positionnement d'un élément par rapport à sa position normale. Cela signifie définir les propriétés bottom, left,

et

provoquent le déplacement de l'élément de sa position normale. Cependant, d'autres éléments ne s'ajusteront pas pour s'adapter aux lacunes laissées par les éléments.

En revanche, le positionnement absolu permet de positionner les éléments par rapport à l'ancêtre positionné le plus proche. Si un élément absolument positionné n'a pas d'ancêtre positionné, il utilisera le corps du document et se déplacera lorsque la page défile.

Comment l'attribut Z-Index fonctionne-t-il avec le positionnement relatif?

L'attribut

dans le z-index CSS contrôle l'ordre d'empilement vertical des éléments qui se chevauchent. Par conséquent, il peut être utilisé avec un positionnement relatif pour contrôler l'ordre d'affichage des éléments qui se chevauchent. L'attribut z-index ne s'applique qu'aux éléments positionnés (position: absolute, position: relative, position: fixed ou position: sticky).

Les éléments avec des valeurs z-index plus élevés seront affichés avant les éléments avec des valeurs z-index plus faibles. Si z-index n'est pas spécifié, les éléments sont empilés dans l'ordre dans lequel ils apparaissent dans le document HTML.

Puis-je utiliser les valeurs de pourcentage comme propriétés supérieures, droites, inférieures et gauche dans le positionnement relatif?

Oui, vous pouvez utiliser les valeurs de pourcentage comme top, right, bottom et left Propriétés en positionnement relatif. Lorsque vous utilisez un pourcentage de valeur, il est relatif à la taille de l'élément contenant le bloc. Par exemple, si vous définissez top: 50%, il déplacera l'élément vers le bas la moitié de sa hauteur de bloc contenant.

Que se passe-t-il si je spécifie une seule direction (par exemple en haut ou à gauche) pour le positionnement relatif?

Si vous spécifiez une seule direction (par exemple top ou left) pour le positionnement relatif, l'élément se déplacera de cette direction en fonction de la valeur spécifiée. L'autre côté (right ou bottom) ne sera pas affecté et l'élément ne se déplacera pas de ce côté.

Puis-je utiliser un positionnement relatif avec l'affichage: flex ou affichage: grille?

Oui, vous pouvez utiliser un positionnement relatif avec display: flex ou display: grid. L'attribut position est indépendant de l'attribut display, vous pouvez donc utiliser n'importe quelle méthode de positionnement avec n'importe quel type d'affichage. Cependant, n'oubliez pas que certaines combinaisons peuvent ne pas obtenir les résultats attendus en raison de la façon dont ces propriétés interagissent.

Comment le positionnement relatif affecte-t-il le processus du document?

Le positionnement relatif ne supprime pas les éléments des flux de documents normaux. Au lieu de cela, il modifie la position de l'élément sans modifier la disposition environnante. Cela signifie que l'espace de l'élément reste dans la disposition comme s'il était dans sa position normale.

Puis-je utiliser des valeurs négatives comme propriétés supérieures, droites, inférieures et gauche dans le positionnement relatif?

Oui, vous pouvez utiliser des valeurs négatives comme top, right, bottom et left Propriétés en positionnement relatif. Une valeur négative déplacera l'élément dans la direction opposée. Par exemple, si vous définissez top: -20px, il fera monter l'élément de 20 pixels.

Quel est le but du positionnement relatif dans CSS?

Le positionnement relatif dans CSS est utilisé lorsque vous souhaitez ajuster la position de l'élément sans affecter la disposition d'autres éléments. Il est également utile lorsque vous souhaitez créer un contexte pour les éléments enfants absolument positionnés.

Comment le positionnement relatif interagit-il avec d'autres propriétés CSS telles que la marge, le rembourrage et la bordure?

margin, padding et border Les propriétés affectent la taille de l'élément et de l'espace environnant. Ces propriétés fonctionnent de la même manière que le positionnement relatif fonctionne de la même manière que les processus normaux. Relativement positionné top, right, bottom et left Les propriétés déplaceront les éléments de leur position normale, mais ils n'affecteront pas la taille de l'élément ou l'espace qui les entoure.

Puis-je animer les propriétés supérieure, droite, inférieure et gauche des éléments de positionnement relatifs?

Oui, vous pouvez utiliser des transitions ou des animations CSS pour animer les propriétés top, right, bottom et left des éléments de positionnement relatifs. Cela peut créer divers effets, tels que des éléments qui glissent de l'extérieur de l'écran ou se déplaçant sur la page.

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!