Maison  >  Article  >  interface Web  >  Comment utiliser le CSS pour le positionnement ? Explication détaillée de la disposition et du positionnement CSS

Comment utiliser le CSS pour le positionnement ? Explication détaillée de la disposition et du positionnement CSS

云罗郡主
云罗郡主original
2018-10-31 17:29:172823parcourir

Comment utiliser CSS pour le positionnement ? CSS peut vous aider à positionner des éléments HTML. Vous pouvez placer n'importe quel élément HTML où vous le souhaitez. Vous pouvez spécifier si vous souhaitez que l'élément soit positionné par rapport à sa position naturelle sur la page ou en fonction de la définition de son élément parent. Expliquons la disposition et le positionnement CSS ci-dessous.

Comment utiliser le CSS pour le positionnement ? Explication détaillée de la disposition et du positionnement CSS

1 : Positionnement relatif

Le positionnement relatif modifie la position d'un élément HTML par rapport à sa position d'affichage normale. left:20 ajoute 20 pixels à la position GAUCHE de l'élément. [Lecture recommandée : Explication détaillée du positionnement relatif, du positionnement absolu et du positionnement fixe]

Vous pouvez utiliser les valeurs du haut et de gauche​​et l'attribut position pour déplacer des éléments HTML vers HTML n'importe où dans le document.

Déplacer vers la gauche - Utilisez des valeurs négatives pour le côté gauche.

Déplacez-vous vers la droite - utilisez des valeurs positives à gauche.

Monter - Utilisez la valeur négative en haut.

Descendre - utilisez une valeur positive pour le haut.

Remarque - Vous pouvez également utiliser les valeurs du bas ou de droite de la même manière que celles du haut et de la gauche.

2 : Positionnement absolu

position : L'élément absolu est situé aux coordonnées spécifiées par rapport au coin supérieur gauche de l'écran.

Vous pouvez déplacer un élément HTML vers n'importe quelle position dans un document HTML en utilisant deux valeurs, haut et gauche, et l'attribut position.

Déplacer vers la gauche - Utilisez des valeurs négatives pour le côté gauche.

Déplacez-vous vers la droite - utilisez des valeurs positives à gauche.

Monter - Utilisez la valeur négative en haut.

Descendre - utilisez une valeur positive pour le haut.

Remarque - Vous pouvez également utiliser les valeurs du bas ou de droite de la même manière que celles du haut et de la gauche.

Trois : Positionnement fixe

Le positionnement fixe vous permet de fixer la position d'un élément à un emplacement spécifique sur la page, quel que soit le défilement. Les coordonnées spécifiées seront relatives à la fenêtre du navigateur.

Vous pouvez déplacer un élément HTML vers n'importe quelle position dans un document HTML en utilisant deux valeurs, haut et gauche, et l'attribut position.

Déplacer vers la gauche - Utilisez des valeurs négatives pour le côté gauche.

Déplacez-vous vers la droite - utilisez des valeurs positives à gauche.

Monter - Utilisez la valeur négative en haut.

Descendre - utilisez une valeur positive pour le haut.

Remarque - Vous pouvez également utiliser les valeurs du bas ou de droite de la même manière que celles du haut et de la gauche.

Ce qui précède est de savoir comment utiliser les CSS pour le positionnement ? Explication complète de la disposition et du positionnement CSS. Si vous souhaitez en savoir plus sur le Tutoriel CSS, veuillez faire attention au site Web chinois php.


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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn