Il existe plusieurs façons de positionner le HTML

Le positionnement HTML comprend : 1. Positionnement par défaut, statique ; 2. Positionnement relatif, relatif ; 3. Positionnement absolu, absolu ; 4. Positionnement relatif et absolu mixte, relatif et absolu ; flotter, flotter.

L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3&&HTML5, ordinateur Dell G3.

1. statique (par défaut)

Lorsque vous ne spécifiez pas de méthode de positionnement pour un élément (comme p), la valeur par défaut est statique, ce qui est conforme à le flux du positionnement du document (flux), en plaçant l'élément dans un endroit approprié. Par conséquent, sous différentes résolutions, l’utilisation du positionnement de flux peut être bien adaptée et obtenir des effets de disposition relativement bons.

De manière générale, nous n'avons pas besoin de préciser que la méthode de positionnement de l'élément actuel est statique - car il s'agit de la méthode de positionnement par défaut. Sauf si vous souhaitez remplacer le système de positionnement hérité de l'élément parent.

2. Relatif (positionnement relatif)

Basé sur la statique, si je souhaite qu'un élément fasse quelques ajustements (déplacements) à sa position d'origine, nous pouvons définir le positionnement de l'élément par rapport et spécifiez le déplacement relatif (en utilisant haut, bas, gauche, droite).

Une chose à noter est que l'élément positionné relativement est toujours dans le flux de documents et occupe toujours l'espace de position qu'il occupait à l'origine - bien qu'il ne soit plus dans sa position d'origine.

3. Absolu (positionnement absolu)

Si vous souhaitez placer un élément à une position spécifiée dans un document, vous pouvez utiliser le positionnement absolu. l'élément en absolu et utilisez haut, bas, gauche et droite pour le positionner.

Le positionnement absolu entraîne la suppression de l'élément du flux documentaire, avec pour résultat que l'espace initialement occupé par l'élément est rempli par d'autres éléments.

4. Mélanger relatif et absolu (mélanger le positionnement relatif et le positionnement absolu)

Si relatif est défini sur un élément parent et absolu est défini sur l'un de ses éléments enfants , Par exemple :

<div id="parent" style="position:relative">
    <div id="child" style="position:absolute">
    </div>
</div>

, la référence pour le positionnement absolu de l'élément enfant est l'élément parent.

En utilisant un positionnement mixte, nous pouvons utiliser du CSS similaire au suivant pour obtenir un positionnement à deux colonnes

#div-parent {
 position:relative;
}
#div-child-right {
 position:absolute;
 top:0;
 right:0;
 width:200px;
}
#div-child-left {
 position:absolute;
 top:0;
 left:0;
 width:200px;
}

5 fixe (positionnement fixe)

Nous. sachez que la référence pour le positionnement absolu est "le dernier élément parent positionné (le statique ne compte pas)", alors que faire si je veux que la référence pour le positionnement d'un élément soit toujours le document entier (fenêtre d'affichage) ?

La réponse est d'utiliser un positionnement fixe. L'objet de référence du positionnement fixe est toujours le document actuel. En utilisant le positionnement fixe, nous pouvons facilement positionner un p en haut à gauche, en haut à droite, etc. du document du navigateur. Par exemple, si vous souhaitez ajouter une invite d'information p et corriger le p dans le coin supérieur droit, vous pouvez utiliser le css suivant

.element  { 
    position:fixed; 
    top:2%; right:2%;
 }

6, float (float)

pour Floating, ce que vous devez comprendre est :

* Floating supprimera l'élément du flux de documents, et son espace sera rempli par d'autres éléments.

* Le paramètre flottant est l'élément parent et flotte dans le conteneur de l'élément parent.

* Afin d'effacer l'impact du flottant sur les éléments après l'élément flottant, nous ajoutons un p après l'élément flottant et définissons l'effacement de ce p sur les deux.

* Si les deux éléments sont définis pour flotter, les deux éléments ne se chevaucheront pas. Le premier élément occupe un certain espace et le deuxième élément suit de près. Si vous ne souhaitez pas que le deuxième élément le suive, vous pouvez utiliser clear sur le deuxième élément flottant.

7. référence

Value	Description
static	Elements renders in order, as they appear in the document flow. This is default.
absolute	The element is positioned relative to its first positioned (not static) ancestor element
fixed	The element is positioned relative to the browser window
relative	The element is positioned relative to its normal position, so "left:20" adds 20 pixels to the element's LEFT position
inherit	The value of the position property is inherited from the parent element

Apprentissage recommandé : tutoriel vidéo html

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!