Introduction détaillée à l'attribut de positionnement CSS (avec exemples)

Avant-propos : Dans le processus d'utilisation de CSS pour mettre en page et embellir la page, l'attribut position est souvent utilisé. Nous présenterons donc ensuite l’attribut position en détail.

Tutoriel vidéo recommandé : Tutoriel vidéo CSS

Tout d'abord, écrivons un fichier HTML et utilisons CSS pour centrer verticalement le contenu multiligne.

<div class="wrap">
    <div class="content">
    <h1>hello world</h1>
    <h2>HELLO WORLD</h2>
    <h3>层叠样式表</h3>
    </div>
</div>

Ensuite, nous utilisons CSS pour la mise en page et la composition :

.wrap{
width:100%;
height:400px;
display:table;
}
.content{
display:table-cell;
vertical-align:table;
text-align:center;
}

attribut de position :

-, positionnement statique/conventionnel Positionnement/Positionnement naturel statique

Fonction : Positionner l'élément dans le flux naturel

Caractéristiques :

1, ignorez la déclaration haut, bas, gauche, droite ou z-index

2, si deux éléments adjacents ont des marges définies, alors la marge finale Marge = la plus grande des deux marges

3, un élément avec des valeurs de largeur et de hauteur fixes, si les marges gauche et droite sont définies sur auto, les marges gauche et droite s'agrandiront automatiquement pour occuper la totalité restante largeur, l'effet est que le bloc est centré horizontalement

2. Positionnement relatif relatif

Fonction : Faire de l'élément un ancêtre positionnable Element

Caractéristiques  :

1, vous pouvez utiliser top/right/bottom/left/z-index pour le positionnement relatif, les éléments relatifs sont naturellement Position dans le flux

2, la position des éléments relativement positionnés dans le flux naturel sera conservée

3, n'importe quel élément peut être défini est relatif, et ses descendants positionnés de manière absolue peuvent être positionnés de manière absolue par rapport à lui

4, et les éléments flottants peuvent être décalés (pour résoudre le problème du réglage de t/r/b pour deux éléments flottants) /l problème invalide), et contrôler leur ordre d'empilement

3. Positionnement absolu absolu

Fonction : Faire en sorte que les éléments se détachent de flux naturel

Caractéristiques :

1, rupture avec le flux naturel

2, ensemble le rapport en pourcentage de la taille C'est l'élément ancêtre positionnable le plus proche

3 Si lrtb est défini sur 0, il sera aligné sur tous les côtés de l'élément ancêtre positionnable le plus proche (dérivé de. l'astuce du centrage horizontal et vertical)

4, S'il n'y a pas d'élément ancêtre positionnable récent, il sera considéré comme un élément ancêtre positionnable

5, z-index peut contrôler l'ordre d'empilement

4. Positionnement fixe fixe

Fonction : similaire au positionnement absolu

Caractéristiques :

1, Positionnement par rapport à la fenêtre d'affichage du navigateur

2, Les éléments de positionnement fixes ne défileront pas au fur et à mesure que la fenêtre défile

3, héritez des caractéristiques de l'absolue

Utilisez la position pour centrer verticalement les sous-éléments

<div class="wrap">
    <div class=""content></div>
</div>

.wrap {
	width: 200px;
	height: 200px;
	background: blue;
	position: relative;
}
.content {
	width: 100px;
	height: 100px;
	background: red;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto auto;
}

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!