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é. 🎜>

Syntaxe :

float : left | left aucun ; droite, gauche ou non utilisé (par défaut)

float : hors du flux de documents, le flottant est relatif au parent élément

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

comme ci-dessus : p1 est l'élément parent de p2, p2 ne peut flotter qu'à l'intérieur de p1

Une situation fréquemment utilisée pour le flottement est l'utilisation de barres de navigation horizontales. Il existe deux façons d'implémenter la barre de navigation horizontale. Tant que l'attribut d'affichage de la balise li est modifié en style en ligne, la liste peut être carrelée. C'est la partie principale, mais après avoir compris le modèle de boîte, nous pouvons le savoir. que la marge et le remplissage de la balise en ligne sont opposés. Les directions haut et bas ne sont pas valides. Seuls les côtés gauche et droit des options de liste peuvent être étirés ici. Les directions haut et bas ne seront pas contrôlées. les directions des étiquettes au niveau du bloc seront contrôlées.

float est également une application simple de certains effets d'image d'habillage de texte. Mettez l'image et le texte dans le même p, puis donnez à l'image et à p un flotteur : gauche | droite ;

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!