Comment positionner les CSS

Méthode de positionnement CSS : utilisez d'abord l'attribut position pour spécifier le type de positionnement de l'élément (positionnement statique, positionnement absolu, positionnement relatif ou positionnement fixe) puis utilisez les attributs gauche, haut, droite, bas pour ajuster ; la position de l'élément.

L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3&&HTML5, ordinateur Dell G3.

Qu'est-ce que le positionnement :

L'attribut position en CSS, la position a quatre valeurs : absolue/relative/fixe/statique (absolue/relative /Fixe/Statique (par défaut)) Vous pouvez définir certaines dispositions irrégulières via les attributs de positionnement. Utilisez TLBR(top,left,bottom,right) pour ajuster la position des éléments.

Description de chaque valeur d'attribut :

• statique (statique) Il n'y a pas de paramètre spécial, ne se détache pas à partir du flux de documents, Suivre les règles de positionnement de base et ne peut pas être hiérarchisé via z-index. Dans les flux ordinaires, les attributs par défaut de chaque élément sont.
• Les objets relatifs (positionnement relatif) ne peuvent pas être empilés, ne se détachent pas du flux de documents et sont positionnés en haut, en bas, à gauche, à droite par référence à leur propre position statique.
• absolu (positionnement absolu) Hors du flux de documents, positionné en haut, en bas, à gauche, à droite. Sélectionnez son objet parent le plus proche avec le plus de paramètres de positionnement pour un positionnement absolu. Si le parent de l'objet ne définit pas d'attributs de positionnement, l'élément absolu sera positionné à l'origine des coordonnées du corps.
• fixe (positionnement fixe) Hors du flux de documents, L'objet de référence fixe ici est la fenêtre visuelle plutôt que le corps ou l'élément parent. Les éléments fixes ne défileront pas pendant le défilement de la fenêtre. Appartient à un sous-ensemble de l'absolu.

La fonction spécifique de chaque valeur d'attribut :

A.static : (statique, attribut par défaut ) ne sera pas utilisé dans des circonstances normales, mais il y aura certains scénarios dans lesquels vous souhaiterez l'utiliser lorsque vous souhaitez modifier la valeur de position d'autres valeurs à la valeur par défaut.

B.relative : (positionnement relatif) Un élément est défini sur position : relative, car il ne se détache pas du flux du texte, si TLBR (haut, gauche, bas, droite ) n'est pas défini, sa position ne sera pas modifiée et cela n'affectera pas la disposition actuelle, ce qui équivaut à ce que rien ne se passe. Si TLBR est défini, l'élément peut être décalé dans la direction spécifiée, mais sa position d'origine est toujours occupée. Un exemple est montré dans la figure :

Figure 1 : Position : relative

Image 2 : Ajuster la position de l'enfant-1 en haut : 20px à gauche : 20px

C. absolu : (positionnement absolu), complètement séparé du flux de texte (flux ordinaire), la position d'origine n'est plus occupée, et TLBR peut être réglé pour se déplacer à volonté

En particulier, après réglage ; absolu sur l'élément, aucun de ses éléments parents n'est défini sur la position : absolu/relatif/fixe et il aura body comme parent.

Photo 1 :

Photo 2 :

Photo 3 :

D.fixed : (positionnement fixe), il ne défilera pas au fur et à mesure que la page défile, donc il n'y aura pas d'images ici. Les plus vives sont ces petites toiles. pages publicitaires. Vous faites défiler la page, mais elle continue de vous suivre à droite ou à gauche de la page.

Compétences de mise en page de positionnement : position : relative et position : absolue utilisées en combinaison :

Comme mentionné ci-dessus, si absolu est défini sur un élément , son Aucun des éléments parents n'a de position: relative définie, et le corps sera le parent. Dans ce cas, il nous sera difficile de positionner l’élément à notre position cible, et il sera difficile de mesurer les pixels. Description de l'image :

Image 1 : État initial

Image 2 : Position définie : absolue pour box-chd-chd et set top : 0, à gauche : 0 Vous pouvez voir qu'il part du corps en tant que parent, et prend le coin supérieur gauche comme point de départ

Figure 3 : Position définie : par rapport à la boîte, vous pouvez voir que le box-chd-chd utilise box comme parent

Figure 4 : Définir la position : par rapport à box-chd, vous pouvez voir que box-chd- chd utilise box-chd comme niveau parent

On peut voir que lorsque l'enfant définit la position : absolue et que son parent définit la position : relative, l'enfant se déplacera du coin supérieur gauche de l'élément parent comme point de départ et suivra le principe le plus proche , c'est-à-dire que les enfants recherchent le parent vers le haut. Lorsque le premier parent est trouvé et que le parent est défini, son coin supérieur gauche est utilisé comme point de départ.

La combinaison du relatif et de l'absolu facilite le positionnement et la mise en page, et la distance qui doit être déplacée est également réduite. Il n'est pas nécessaire de partir du corps pour mesurer les pixels de la page entière. pratique pour la gestion et a une structure claire.

(Partage vidéo d'apprentissage : 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!