Comment utiliser la position et le float en HTML ?

Syntaxe :

position : statique (positionnement statique) | absolu (positionnement absolu) | fixe (positionnement fixe) | relatif (positionnement relatif)

Paramètres d'attribut :

statique : positionnement statique, pas de positionnement particulier, l'objet suit les règles de positionnement HTML (l'état par défaut du html)

absolu : positionnement absolu, l'objet est hors du flux de documents et vous devez utiliser gauche, haut, droite, bas et autres attributs pour un emplacement précis. Vous pouvez utiliser l'attribut z-index pour la mise en cascade. (Si l'élément flotte lors de l'utilisation du positionnement absolu et n'est pas à la position que vous avez spécifiée, vous pouvez utiliser le positionnement relatif sur l'élément parent de l'élément. "Suggestion personnelle")

relatif : positionnement relatif, l'objet le fait ne quitte pas le flux de documents. Le flux ne peut pas être mis en cascade comme un absolu, mais des attributs tels que gauche, haut, droite, bas, etc. doivent toujours être utilisés pour se déplacer par rapport à la position d'origine de l'objet dans le flux de documents normal, et la position d'origine sera occupée. par d'autres éléments.

fixe : un positionnement fixe, séparé du flux de documents, peut maintenir l'élément dans une position fixe sur l'écran, et la position de l'élément ne changera pas même si la barre de défilement est abaissée.

<p  style="border=“1px  solid red；position：absolute；top：150px；left：200px；">我是p111111</p>

p111111 se déplacera de 150px vers le bas et de 200px vers la droite

<p  style="border=“1px  solid red；position：absolute；bottom：50px；right：100px；">我是p222222</p>

p222222 se déplacera de 150px depuis le bas et de 100px depuis la bordure droite

Quand vous le souhaitez pour créer un module qui est toujours affiché dans le coin inférieur droit de la page, utilisez position: fixed; bottom: 50px right: 50px; vous pouvez faire en sorte que p affiche 50px du bas et 50px de la bordure droite, et peu importe comment. votre page change, p sera toujours affiché. Il sera affiché à la même position dans votre plage visuelle

z-index : 100px ; plus les pixels qui suivent sont grands, plus le niveau de p est élevé. 🎜>

<p  id="p1">
　　<p  id="p2"></p>
</p>

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!