Quatre utilisations majeures de l'attribut position dans la mise en page DIV

Utiliser correctement la disposition pattribut de positionattribut

La signification anglaise originale de Position fait référence à position, position et statut. Cela signifie également le placement. Dans la mise en page CSS, Position joue un rôle très important et le positionnement de nombreux conteneurs est complété à l'aide de Position.

L'attribut Position a quatre valeurs facultatives, qui sont : statique, absolue, fixe et relative. Apprenons ensemble leurs différentes utilisations. Au cours de l'étude, nous devons réfléchir à lequel d'entre eux doit être utilisé dans quelle situation d'aménagement.
Pour plus d'informations sur l'attribut Position, veuillez vous référer ici.

◆p position de l'attribut de mise en page : statique Aucun positionnement

Cette valeur d'attribut est le positionnement par défaut de tous les éléments. Dans des circonstances normales, nous n'avons pas besoin de la déclarer spécifiquement, mais parfois quand hérite , nous ne voulons pas voir les attributs hérités par l'élément s'affecter, nous pouvons donc utiliser position:static pour annuler l'héritage, c'est-à-dire restaurer la valeur par défaut du positionnement de l'élément. Par exemple : #nav{position:static;}

◆p position de l'attribut de mise en page:absolute　

Positionnement absolu

L'utilisation de position:absolute peut être très précise l'élément là où vous le souhaitez, permettez-moi de déplacer la navigation vers le coin supérieur droit de la page. On peut écrire ainsi : nav{position:absolute;top:0;right:0;width:200px;}

Le calque devant ou derrière le calque de navigation qui utilise le positionnement absolu pensera que ce calque n'existe pas, c'est-à-dire que dans la direction z, il est relativement indépendant et n'affecte pas du tout les
autres couches dans la direction z. Donc position:absolute est idéal pour placer un élément dans une position fixe, mais cela ne fonctionne pas si vous devez déterminer la position du calque par rapport aux calques proches. Vous ne pouvez utiliser le positionnement relatif que comme indiqué ci-dessous. Il y a un bug WinIE qui doit être mentionné ici, c'est-à-dire que si vous définissez une largeur relative pour un élément positionné de manière absolue, alors sa largeur sous IE dépend de la largeur de l'élément parent plutôt que de la largeur de l'ensemble page.

◆p position de l'attribut de mise en page :fixe Positionnement fixe par rapport à la fenêtre

Que signifie cette valeur d'attribut de positionnement ? L'élément est positionné de la même manière que l'absolu, mais son bloc conteneur est la fenêtre elle-même. Dans les médias d'écran tels que les navigateurs Web, les éléments ne bougent pas dans la vue du navigateur lorsque le document défile. Par exemple, il permet une disposition de style cadre. Dans les médias de page tels que les impressions, un élément fixe apparaît à la même position sur la première page. Cela peut être utilisé pour générer des titres ou des notes de bas de page fluides. Nous avons vu des effets similaires, mais la plupart d’entre eux ne sont pas obtenus via CSS, mais à l’aide de scripts JS.

Veuillez noter qu'IE6 ne prend pas en charge l'attribut position:fixed en CSS. C'est vraiment dommage, sinon on aurait pu essayer cet effet sympa.

◆p position de l'attribut de mise en page : relative Positionnement relatif

Que signifie exactement le positionnement relatif ? Où est-il basé sur le positionnement relatif ? Nous devons clarifier un concept, le positionnement relatif est un positionnement par rapport à la position par défaut de l'élément. Puisqu'il est relatif, nous devons définir différentes valeurs pour déclarer où le positionner. Les quatre valeurs haut, bas, gauche et droite coopèrent pour clarifier la position de l'élément. Si vous souhaitez que le calque de navigation se déplace de 20 px vers le bas et de 40 px vers la gauche :
Nous pouvons écrire comme ceci : #nav{position:relative;top:50px;left:50px;}
Mais vous devez faire attention à la situation suivante, relative La couche woaicss positionnée immédiatement après lui n'apparaîtra pas sous nav, mais se chevauchera dans une certaine mesure avec nav !

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!