Introduction et exemples de positionnement CSS gauche droite haut bas

Ces quatre styles d'attribut CSS sont utilisés pour positionner la zone d'objet. La valeur de l'attribut position doit être définie comme étant absolue ou relative pour que cette valeur prenne effet.

1. Structure grammaticale

Gauche, droite, haut, bas suivi de chiffres + unités html.

Structure de démonstration

div{left:20px}

div{right:20px>

div{top:20px}

div{bottom:20px>

Gauche La distance à gauche

Droite La distance à droite

Haut La distance depuis le haut

La distance de bas en bas

2. Conditions d'utilisation

Habituellement, l'utilisation de gauche, droite, haut, bas n'est pas valide. Vous devez utiliser le

positionnement absolustyle de position CSS. pour prendre effet.

En général, un seul parmi gauche et droite peut être utilisé dans un style. Vous ne pouvez pas définir à la fois gauche et droite, ou utiliser droite au lieu de gauche. , alors il y aura des problèmes de compatibilité. Si un objet est réglé à une certaine distance vers la gauche, la distance vers la droite sera naturellement là, il n'est donc pas nécessaire de définir la gauche.

De la même manière, un seul haut et bas peut être utilisé pour un objet, sinon des problèmes de compatibilité logiques surviendront. Par exemple, si une personne vous demande d’aller à gauche et qu’une autre vous demande d’aller à droite, et qu’en même temps elle vous dit d’aller à gauche ou à droite, il vous est difficile de juger dans quelle direction aller.

3. Utilisation en positionnement absolu

Généralement, gauche, droite, haut et bas sont utilisés pour positionner l'objet en conjonction avec la position. Vous pouvez accéder au didacticiel de position CSS pour en savoir plus sur ces attributs de style.

Exemple :

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!