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

Cet article parle de quatre méthodes de positionnement position en CSS Résumé

position : statique.  ; positionnement statique (par défaut )

Tous les éléments du flux de documents standard sont positionnés statiquement

2 .position:relative;Positionnement relatif

Ne s'écarte pas du flux de documents standard, "laissant un trou dans la ville natale, séparant les ombres"

Caractéristiques : Si vous définissez le positionnement relatif et définissez les attributs haut, gauche, droite, bas, alors la boîte être dans la boîte Décaler la position d'origine

Utilisation du positionnement relatif : Généralement non utilisé pour "l'effet de plafonnement", seulement deux fonctions :

(1) Éléments de réglage fin

(2) Référence pour le positionnement absolu, enfant et parent

Vous pouvez utiliser gauche et droite pour décrire le décalage de la droite et de la gauche de la boîte, vous pouvez utiliser le haut et le bas pour ; décrire le bas et le haut de la boîte Décalage de

position：relative；
top：10px;
left：10px;   //相对于原来位置向右下移10px

position：relative;
top:-10px;
left:-10px;   //相对于原来位置向左上移10px

3 . position:absolute; Positionnement absolu

Rompre avec le flux de documents standard

Caractéristiques : (1) Si cet élément n'a pas d'élément parent, alors top , gauche, droite et bas seront relatifs au navigateur à l'avenir Positionné par la fenêtre du navigateur

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

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

　(4 ) Les éléments après le positionnement absolu n'occuperont pas la position sur la page

position:fixed; Positionnement fixe

Rompre avec le flux documentaire standard

Fixe Le but du positionnement : Certaines petites publicités sur la page doivent être fixées dans une position fixe sur la page

Résumé : lors de la rédaction de pages à l'avenir, les plus utilisées ne sont pas Le positionnement absolu n'est pas un positionnement relatif, mais le positionnement absolu est utilisé avec le positionnement relatif

Spécification : l'enfant doit être le même que le parent (les éléments enfants utilisent un positionnement absolu et les éléments parents utilisent un positionnement relatif)

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!