Position (propriété CSS)

Description

La propriété de position, ainsi que la propriété flottante, contrôle la façon dont la position de la boîte générée de l'élément est calculée. Voir le positionnement pour plus de détails sur le positionnement des éléments. Les boîtes avec une valeur de position autre que statique seraient positionnées. Leur placement vertical dans le contexte d'empilement est déterminé par la propriété Z-Index.

valeur

absolu La valeur absolue génère une boîte absolument positionnée positionnée par rapport à son bloc contenant. La position peut être spécifiée en utilisant un ou plusieurs des propriétés en haut, à droite, en bas et à gauche. Les boîtes absolument positionnées sont retirées de l'écoulement et n'ont aucun effet sur les frères et sœurs ultérieurs. Les marges sur les boîtes absolument positionnées ne s'effondrent jamais avec des marges sur d'autres boîtes. fixé La valeur fixe génère une boîte absolument positionnée qui est positionnée par rapport au bloc de contenu initial (normalement la fenêtre). La position peut être spécifiée en utilisant un ou plusieurs des propriétés en haut, à droite, en bas et à gauche. Dans le type de support d'impression, l'élément est rendu sur chaque page. relatif La valeur relative génère une boîte positionnée dont la position est d'abord calculée comme pour le flux normal. La boîte générée est ensuite décalée à partir de cette position en fonction des propriétés en haut ou en bas et / ou à gauche ou à droite. La position de la boîte suivante est calculée comme si la boîte relativement positionnée occupait la position calculée avant le décalage de la boîte. Cette valeur ne peut pas être utilisée pour les cellules de table, les colonnes, les groupes de colonnes, les lignes, les groupes de lignes ou les légendes. statique La valeur statique génère une boîte qui n'est pas positionnée, mais se produit dans le flux normal. Les propriétés en haut, à droite, en bas, à gauche et à l'indice Z sont ignorées pour les boîtes statiques. hériter L'héritage de la valeur fait que l'élément prend la même valeur calculée que son parent (voir la valeur de la propriété CSS hériter) pour plus d'informations.

Les questions fréquemment posées sur la propriété de position CSS

Quelle est la différence entre le positionnement statique et relatif dans CSS?

Dans CSS, statique et relative sont deux types de méthodes de positionnement. Statique est la méthode de positionnement par défaut. Lorsqu'un élément est positionné statiquement, il n'est pas affecté par les propriétés supérieure, inférieure, gauche ou droite. Il est toujours positionné en fonction du flux normal de la page. D'un autre côté, un élément avec positionnement relatif est positionné par rapport à sa position normale. Cela signifie que vous pouvez ajuster la position de l'élément en utilisant les propriétés supérieure, inférieure, gauche ou droite sans affecter la disposition d'autres éléments.

Comment fonctionne le positionnement absolu dans CSS?

Le positionnement absolu en CSS vous permet de positionner un élément précisément où vous le souhaitez. Il est positionné par rapport à l'ancêtre positionné le plus proche (au lieu de positionné par rapport à la fenêtre, comme fixe). Cependant, si un élément positionné absolu n'a pas d'ancêtres positionnés, il utilise le corps du document et se déplace avec le défilement de la page.

À quoi sert la propriété Z-Index dans le positionnement CSS?

La propriété Z-Index dans CSS est utilisée conjointement avec la propriété de position pour contrôler l'ordre des éléments d'empilement. Il ne fonctionne que sur des éléments positionnés (position: absolue, position: relative, position: fixe ou position: collant). La propriété Z-Index spécifie l'ordre de pile d'un élément. Un élément avec un ordre de pile plus élevé est toujours devant un élément avec un ordre de pile inférieur.

En quoi la position fixe diffère-t-elle de la position absolue dans CSS?

La position fixe dans CSS est Un type de positionnement absolu qui positionne l'élément par rapport à la fenêtre du navigateur. Contrairement à la position absolue, l'élément de position fixe ne se déplacera pas même si la page est défilée, ce qui le rend idéal pour créer des en-têtes ou des pieds de page. > La propriété de position CSS est utilisée pour spécifier le type de méthode de positionnement utilisée pour un élément. Il existe cinq valeurs de position différentes: statique, relative, fixe, absolue et collante. La propriété de position vous aide à manipuler l'emplacement d'un élément, vous permettant de créer des dispositions complexes.

Puis-je utiliser la propriété de position CSS pour centrer un élément?

Oui, vous pouvez utiliser le CSS Positionner la propriété en combinaison avec d'autres propriétés comme la gauche, la marge, la marge et la transformation en central un élément. Cependant, la méthode exacte dépend du type de positionnement et du contexte de l'élément.

Quelle est la position collante dans CSS?

La position collante en CSS est un hybride de relatif et fixe positionnement. L'élément est traité comme positionné relatif jusqu'à ce qu'il traverse un seuil spécifié, à quel point il est traité comme positionné fixe.

Comment la propriété de position CSS affecte-t-elle le flux normal du document?

La propriété de position CSS peut affecter considérablement le flux normal du document. Le positionnement statique et relatif maintient le flux de document normal, tandis que le positionnement absolu et fixe supprime l'élément du flux de document. Cela signifie qu'ils ne prennent pas de place et peuvent chevaucher d'autres éléments.

Puis-je nidifier des éléments positionnés dans CSS?

Oui, vous pouvez nidifier des éléments positionnés dans CSS. Lorsque vous faites cela, l'élément enfant est positionné par rapport à l'ancêtre positionné le plus proche. Cela peut être utile pour créer des dispositions complexes.

Comment la propriété de position CSS interagit-elle avec la propriété d'affichage?

La propriété de position CSS peut remplacer la propriété d'affichage. Par exemple, si vous définissez un élément pour afficher: Aucun, mais positionnez-le avec position: absolue ou position: fixe, l'élément sera toujours affiché. Cependant, l'interaction entre ces deux propriétés peut être complexe et dépend du contexte spécifique.

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!