Positionnement CSS

L'attribut Position (Positionnement) de CSS permet de positionner des éléments.

CSS Position et Flottant

CSS fournit quelques attributs pour la position et le flottant, à l'aide desquels il est possible de créer des mises en page en colonnes, de superposer une partie de la mise en page à une autre, et de réaliser des tâches qui nécessitaient traditionnellement plusieurs tableaux depuis des années.

L'idée fondamentale de la position est très simple, elle permet de définir la position de la boîte d'élément par rapport à sa position normale, ou par rapport à l'élément parent, à un autre élément, ou même à la fenêtre du navigateur elle-même. Il est évident que cette fonction est très puissante et étonnante. Pour savoir, le support de l'agent utilisateur pour la position dans CSS2 est bien supérieur à celui de d'autres aspects, ce qui ne devrait pas surprendre.

D'autre part, CSS1 a introduit pour la première fois le flottant, basé sur une fonction ajoutée par Netscape au début du développement du Web. Le flottant n'est pas complètement positionné, mais bien sûr, ce n'est pas non plus un布局 en flux normal. Nous allons clarifier la signification du flottant dans les chapitres suivants.

Tout est un cadre

Les éléments div, h1 ou p sont souvent appelés éléments en bloc. Cela signifie que ces éléments s'affichent commeUn contenu en bloc, appelé "cadre en bloc". À l'inverse, les éléments span et strong sont appelés "éléments en ligne", car leur contenu est affiché dans une ligne, c'est-à-dire dans un "cadre en ligne".

Vous pouvez utiliser Attribut displayModifier le type de cadre généré. Cela signifie que, en définissant l'attribut display sur block, il est possible de faire apparaître un élément en ligne (comme un élément <a>) comme un élément en bloc. De plus, en définissant display sur none, l'élément généré n'a pas de cadre et n'affiche pas de contenu, ce qui ne prend pas de place dans le document.

Mais dans un cas, même sans définition explicite, un élément en bloc est créé. Ce cas se produit lorsque certains textes sont ajoutés au début d'un élément en bloc (comme un élément div). Même si ces textes ne sont pas définis comme un paragraphe, ils sont traités comme un paragraphe :

<div>
some text
<p>Some more text.</p>
</div>

Dans ce cas, ce cadre est appelé cadre anonyme, car il n'est pas associé à un élément défini spécifiquement.

Les lignes de texte des éléments en bloc subissent également un tel comportement. Supposons qu'il y ait un paragraphe contenant trois lignes de texte. Chaque ligne de texte forme un cadre anonyme. Il n'est pas possible d'appliquer directement un style à un cadre anonyme ou à un cadre de ligne, car il n'y a pas d'endroit où appliquer le style (notez que le cadre de ligne et le cadre en ligne sont deux concepts distincts). Cependant, cela aide à comprendre que tout ce que nous voyons à l'écran forme un certain type de cadre.

Mécanisme de positionnement CSS

CSS comporte trois mécanismes de positionnement de base : le flux normal, le flottant et la position absolue.

À moins d'être spécifiquement désignés, tous les cadres sont positionnés dans le flux normal. Cela signifie que la position des éléments dans le flux normal est déterminée par la position de l'élément dans (X)HTML.

Les cadres en bloc sont alignés les uns après les autres de haut en bas, et la distance verticale entre les cadres est calculée à partir de la marge externe verticale du cadre.

Les cadres en ligne sont disposés horizontalement sur une ligne. Ils peuvent être espacés en utilisant les marge interne horizontale, les bordures et les marge externe. Cependant, les marge interne verticale, les bordures et les marge externe n'affectent pas la hauteur du cadre en ligne. Le cadre horizontal formé par une ligne est appeléCadre de ligne (Line Box)Le haut du cadre de ligne est toujours suffisant pour contenir tous les cadres de ligne en ligne qu'il contient. Cependant, l'ajustement de la hauteur de ligne peut augmenter la hauteur de ce cadre.

Dans les chapitres suivants, nous vous expliquerons en détail la position relative, la position absolue et le flottant.

Attribut position CSS

En utilisant Attribut positionNous pouvons choisir 4 types de position différents, ce qui peut affecter la manière dont le cadre de l'élément est généré.

Le sens de la valeur de l'attribut position :

static
Le cadre d'élément est généré normalement. Les éléments en bloc génèrent un cadre rectangulaire, qui fait partie du flux de document, tandis que les éléments en ligne créent un ou plusieurs cadres de ligne, placés à l'intérieur de l'élément parent.
relative
La boîte d'élément est décalée d'une certaine distance. L'élément conserve sa forme non positionnée, et l'espace qu'il occupait est conservé.
absolute
La boîte d'élément est complètement supprimée du flux de document et positionnée par rapport à son conteneur. Le conteneur peut être un autre élément dans le document ou le conteneur initial. L'espace occupé par l'élément dans le flux normal est fermé, comme si l'élément n'existait pas. La position de l'élément génère une boîte bloc, quel que soit le type de boîte qu'il aurait généré dans le flux normal.
fixed
La boîte d'élément se comporte comme si la position était définie sur absolute, mais son conteneur est la fenêtre elle-même.

Avis :Le positionnement relatif est en fait considéré comme une partie du modèle de positionnement du flux normal, car la position de l'élément est relative à sa position dans le flux normal.

Exemple

Positionnement : positionnement relatif
cet exemple montre comment positionner un élément par rapport à sa position normale.
Positionnement : positionnement absolu
cet exemple montre comment positionner un élément en utilisant des valeurs absolues.
Positionnement : positionnement fixe
cet exemple montre comment positionner un élément par rapport à la fenêtre du navigateur.
Définir la marge supérieure de l'image en valeur fixe
cet exemple montre comment définir la marge supérieure de l'image en utilisant une valeur fixe.
Définir la marge supérieure de l'image en pourcentage
cet exemple montre comment définir la marge supérieure de l'image en utilisant une valeur en pourcentage.
Définir la marge inférieure de l'image en valeur en pixels
cet exemple montre comment définir la marge inférieure de l'image en utilisant une valeur en pixels.
Définir la marge inférieure de l'image en pourcentage
cet exemple montre comment définir la marge inférieure de l'image en utilisant une valeur en pourcentage.
Définir la marge gauche de l'image en valeur fixe
cet exemple montre comment définir la marge gauche de l'image en utilisant une valeur fixe.
Définir la marge gauche de l'image en pourcentage
cet exemple montre comment définir la marge gauche de l'image en utilisant une valeur en pourcentage.
Définir la marge droite de l'image en valeur fixe
cet exemple montre comment définir la marge droite de l'image en utilisant une valeur fixe.
Définir la marge droite de l'image en pourcentage
cet exemple montre comment définir la marge droite de l'image en utilisant une valeur en pourcentage.
Comment utiliser la barre de défilement pour afficher le contenu en déborder à l'intérieur de l'élément
cet exemple montre comment définir la propriété overflow pour définir l'action correspondante lorsque le contenu de l'élément dépasse la zone spécifiée.
Comment cacher le contenu en déborder de l'élément
cet exemple montre comment définir la propriété overflow pour cacher le contenu lorsque le contenu de l'élément est trop grand pour s'adapter à la zone spécifiée.
Comment configurer le navigateur pour gérer automatiquement les débordements
cet exemple montre comment configurer le navigateur pour gérer automatiquement les débordements.
Définir la forme de l'élément
cet exemple montre comment définir la forme d'un élément. Cet élément est découpé à l'intérieur de cette forme et affiché.
Alignement vertical des images
cet exemple montre comment aligner verticalement une image dans le texte.
Z-index
Z-index peut être utilisé pour placer un élément après un autre.
Z-index
Dans l'exemple ci-dessus, l'élément a changé de Z-index.

Attributs de positionnement CSS

Les attributs de positionnement CSS permettent de positionner des éléments.

Attribut Description
position Placer un élément dans une position statique, relative, absolue ou fixe.
top Définit l'offset entre la bordure externe supérieure de l'élément positionné et la bordure supérieure de la boîte englobante.
right Définit l'offset entre la bordure externe droite de l'élément positionné et la bordure droite de la boîte englobante.
bottom Définit l'offset entre la bordure externe inférieure de l'élément positionné et la bordure inférieure de la boîte englobante.
left Définit l'offset entre la bordure externe gauche de l'élément positionné et la bordure gauche de la boîte englobante.
overflow Définir ce qui se passe lorsque le contenu de l'élément dépasse sa zone.
clip Définir la forme de l'élément. L'élément est découpé dans cette forme et affiché ensuite.
vertical-align Définir la manière dont l'élément est aligné verticalement.
z-index Définir l'ordre d'empilement des éléments.