css : attribut de positionnement de position et résumé des exemples d'applications

attribut de positionnement de position

La position est un attribut très important en CSS. Il comprend l'absolu (positionnement absolu), le relatif (positionnement relatif), le statique (positionnement statique, valeur par défaut), fixe (positionnement fixe) quatre types. Avec la propriété position, nous pouvons décaler un élément par rapport à sa position normale, son élément parent ou la fenêtre du navigateur. La position est également un attribut sur lequel les débutants peuvent facilement se tromper. À l'heure actuelle, presque tous les navigateurs grand public prennent en charge l'attribut position. Dans l'article suivant, nous parlerons de l'attribut de positionnement position et de son application en CSS.

Vous pouvez d'abord apprendre des cours gratuits liés au site Web chinois php

1 Apprendre"Tutoriel d'introduction de base HTML+CSS"<.>Positionnement du didacticiel de base CSS Chapitre

2. Regardez

"Tutoriel vidéo pour apprendre le CSS du bout des doigts " 中Positionnement CSS Tutoriel vidéo

Applications liées au positionnement de position

1.

Compréhension approfondie de l'attribut position en CSS

Le positionnement absolu sera complètement retiré du flux documentaire, avant l'élément L'espace occupé a également été recyclé. Les éléments positionnés de manière absolue sont positionnés en fonction de leur contexte de positionnement.

Il convient de noter que le positionnement absolu peut transformer des éléments en ligne en éléments de niveau bloc. Mais la certitude est qu'une fois qu'un élément en ligne est positionné de manière absolue, la position de l'élément est difficile à saisir (raison : si l'élément n'a pas de marges intérieure et extérieure définies, et qu'il n'y a pas d'éléments positionnés de manière absolue avant, après, à gauche, et à droite, alors l'élément restera temporairement sur sa position d'origine, mais si l'élément a des marges définies, l'élément restera temporairement à une marge de la position d'origine. S'il y a des éléments avec un positionnement absolu défini à l'avant, à l'arrière. , à gauche et à droite, l'élément recherchera celui du haut qui ne l'est pas. Sous l'élément positionné de manière absolue ) Par conséquent, si vous définissez un positionnement absolu, vous devez le faire. positionnez immédiatement le haut et la gauche de l’élément.

2.

Analyser la différence entre la position relative et absolue en CSS

la position a les attributs suivants : statique, héritage, fixe, absolu, relatif

Le top trois Facile à comprendre et à distinguer :
statique : c'est l'état par défaut, il n'y a pas de positionnement et l'élément apparaît dans le flux normal (en ignorant les instructions haut, bas, gauche, droite ou z-index).
nherit : hérite de la valeur de l'attribut position de l'élément parent.
corrigé : Générer des éléments positionnés de manière absolue, positionnés par rapport à la fenêtre du navigateur. (C'est-à-dire que lors du défilement du navigateur, l'élément est toujours affiché à une certaine position dans la zone visible de la fenêtre).

3.

Introduction à l'utilisation du positionnement CSS

absolu et fixe

Caractéristiques :

La largeur du bloc. -level elements est Lorsqu'il n'est pas défini, il n'est plus à 100%, mais automatiquement ajusté en fonction du contenu

b Lorsque le z-index n'est pas défini, l'élément absoulte couvrira les autres éléments.

c. Il se détachera du flux normal du document et n'occupera plus d'espace, similaire à l'effet après le flottement.

absolu est un positionnement absolu par rapport à l'élément parent précédent qui ne l'est pas. statique. Si la position de l'élément parent n'est pas spécifiée, absolu sera positionné de manière absolue par rapport à l'ensemble du document HTML.

4.

Explication de la méthode de positionnement à l'aide de l'attribut position en CSS

Un élément positionné statique ignorera tout en haut, à droite, Le valeurs déclarées par les propriétés bottom, left et z-index. Pour que votre élément utilise ces cinq propriétés, vous devez d'abord appliquer l'une de ces trois valeurs​​à sa propriété position : absolue, relative, fixe, position. L'élément avec la valeur hériter est la même que la valeur héritée. de toutes les autres propriétés, l'élément héritera de la valeur de position de l'élément parent.

5.

Résumé de quatre méthodes de positionnement en CSS

Flux de documents hors standard

Caractéristiques : (1) Si cet élément n'a pas d'élément parent, alors le haut, la gauche, la droite et le bas seront positionnés par rapport à la fenêtre du navigateur à l'avenir

(2) Si l'élément positionné de manière absolue a un élément parent, mais l'élément parent n'est pas positionné de manière relative, alors à ce moment-là, haut, gauche, droite et bas sont toujours positionnés par rapport à la fenêtre de navigation

(3) Si l'élément en position absolue a un élément parent, et l'élément parent est positionné (non statique), alors le décalage de cet élément positionné de manière absolue est basé sur son propre élément parent

　 (4) L'élément après le positionnement absolu n'occupera pas la position sur la page

6. Positionnement CSS et float

a. S'il y a un p avec une largeur par défaut de 100%, une fois le positionnement absolu ajouté, l'élément sera inline-blocked immédiatement, et la largeur par défaut sera automatiquement adaptée à la largeur interne de l'élément entraînera l'effondrement de la largeur et de la hauteur de la page.

b. En raison de la flexibilité du positionnement absolu, pour les mises en page ordinaires, il est parfois facile d'abuser de l'index absolu/relatif/haut/gauche/z dans le but d'éviter des problèmes, ce qui entraînera une expansion ultérieure. et la maintenance causent des problèmes

Questions et réponses connexes

1 Comment obtenir des fonctions similaires sans utiliser la position : absolue

2. Problèmes de compatibilité avec la position : résolus ; sur le terminal mobile

3 Problème de page Web résolu avec la position de la partie CSS. Liste déroulante réalisée avec du CSS pur.

4. Comment un div peut-il se déplacer à gauche et à droite avec le navigateur après avoir défini l'attribut position :fixe ?

[Recommandations associées]

1. Tutoriels gratuits sur le site Web chinois php : "Tutoriel d'introduction de base CSS 0"

2. Tutoriel vidéo en ligne gratuit en chinois : "php.cn Dugu Jiujian (2) - tutoriel vidéo CSS"

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!