Maison > Article > interface Web > Analyse approfondie et compréhension des détails du positionnement et de la mise en page en CSS
Analyse approfondie et compréhension des détails du positionnement et de la mise en page en CSS
- WBOYoriginal
- 2021-12-22 18:32:081716parcourir
Cet article vous apporte des connaissances pertinentes sur la disposition du positionnement CSS. Jetons un coup d'œil à ce que sont le positionnement relatif, le positionnement absolu et le positionnement fixe, les différentes propriétés et utilisations des éléments, etc. Nous espérons qu'il sera utile à tout le monde.
1. Positionnement relatif
1.1) Qu'est-ce que le positionnement relatif
Positionnement relatif : La boîte peut être positionnée en fonction de sa position d'origine (implémentée via des descripteurs de position).
Descripteurs de position :
gauche : se déplace vers la droite ; la droite se déplace vers la gauche ; le haut se déplace vers le haut
(Lorsque la valeur à l'intérieur est un nombre négatif, se déplace dans la direction opposée)
Par exemple :
Original :
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>相对定位</title>
<style>
* {
margin: 0;
padding: 0;
}
p {
width: 500px;
height: 500px;
border: 1px solid #000;
margin: 50px auto;
}
p {
width: 100px;
height: 100px;
background-color: lightblue;
position: relative;
top: 50px;
left: 50px;
}
</style></head><body>
<p>
<p></p>
</p></body></html>
Définir p sur le positionnement relatif :
p {
width: 100px;
height: 100px;
background-color: lightblue;
position: relative;
top: 50px;
left: 50px;}
1.2) Propriétés et utilisations du positionnement relatif
Propriétés
- Les éléments positionnés relativement sont essentiellement toujours dans leur position d'origine , il s'affiche simplement à un nouvel endroit et n'affectera pas les autres éléments de la page.
Utilisation
- Utilisé pour affiner la position des éléments
- La boîte de positionnement relatif peut être utilisée comme boîte de référence pour un positionnement absolu
Par exemple :
nbsp;html>
<meta>
<meta>
<meta>
<title>相对定位</title>
<style>
* {
margin: 0;
padding: 0;
}
nav {
width: 780px;
height: 50px;
margin: 40px auto;
}
nav ul {
list-style: none;
}
nav ul li {
float: left;
width: 156px;
height: 50px;
line-height: 50px;
text-align: center;
}
nav ul li a {
display: block;
width: 156px;
height: 50px;
background-color: lightcyan;
color: #000;
text-decoration: none;
}
nav ul li a:hover {
border-top: 3px solid red;
}
</style>
<nav>
<ul>
<li>
<a>导航一</a>
</li>
<li>
<a>导航二</a>
</li>
<li>
<a>导航三</a>
</li>
<li>
<a>导航四</a>
</li>
<li>
<a>导航五</a>
</li>
</ul>
</nav>
L'effet à ce moment est comme ceci :
Vous constaterez que lorsque la souris passe dessus, la zone de navigation coulera
Après avoir défini son positionnement relatif et l'avoir affiné :
nav ul li a:hover {
border-top: 3px solid red;
position: relative;
top: -3px;}
Cela résoudra le problème tout à l'heure
2. Positionnement absolu
2.1) Qu'est-ce que le positionnement absolu
Positionnement absolu : La boîte décrit sa position avec des coordonnées et a sa propre position absolue.
Boîte de référence en position absolue :
Une boîte en position absolue utilisera la boîte la plus proche avec des attributs de positionnement parmi ses éléments ancêtres comme point de référence.
Cette boîte est généralement positionnée de manière relative, c'est pourquoi on l'appelle aussi "l'apparence du père du fils".
Descripteurs de position :
gauche : distance vers la gauche ; droite : distance vers la droite ; haut : distance vers le bas ; distance vers le bas
Par exemple :
nbsp;html>
<meta>
<meta>
<meta>
<title>绝对定位</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
position: absolute;
width: 500px;
height: 300px;
left: 200px;
top: 100px;
background-color: antiquewhite;
}
</style>
<p>
</p>
2.2) Positionnement absolu et utilisations de
Les boîtes en position absolue sont centrées verticalement :
.box {
position: absolute;
top: 50%;
margin-top: -自己高度一半;}
Les boîtes en position absolue sont centrées horizontalement :
.box {
position: absolute;
left: 50%;
margin-left: -自己宽度一半;}
- Ordre d'empilement, attribut z-index
Définir le chevauchement des éléments en position absolue Ordre .
est un entier positif sans unités. Des valeurs plus grandes peuvent supprimer des valeurs plus petites (c'est-à-dire que des valeurs plus grandes sont affichées sur le calque supérieur)
Par exemple :
nbsp;html>
<meta>
<meta>
<meta>
<title>绝对定位</title>
<style>
* {
margin: 0;
padding: 0;
}
.box1 {
width: 300px;
height: 300px;
position: absolute;
left: 100px;
top: 100px;
background-color: antiquewhite;
}
.box2 {
width: 300px;
height: 300px;
position: absolute;
left: 200px;
top: 200px;
background-color: lightblue;
}
</style>
<p></p>
<p></p>
L'effet à ce moment est le suivant suit :
<br/>
À ce moment-là, si nous voulons que box1 soit affiché sur le calque supérieur, nous définissons un attribut z-index.
.box1 {
width: 300px;
height: 300px;
position: absolute;
left: 100px;
top: 100px;
background-color: antiquewhite;
z-index: 100;}.box2 {
width: 300px;
height: 300px;
position: absolute;
left: 200px;
top: 200px;
background-color: lightblue;
z-index: 1;}Regardez l'effet : 
- Utilisation
Le positionnement absolu est utilisé pour "couvrir" et "masquer" l'effet
Il peut être utilisé en combinaison avec des sprites CSS
Il peut être combiné avec JS pour réaliser quelques animations
3. Positionnement fixe
3.1) Qu'est-ce que le positionnement fixe
Positionnement fixe : Peu importe la façon dont la page défile, elle prendra toujours la page comme point de référence et y sera fixée.
Descripteurs de position :
gauche : distance vers la gauche ; droite : distance vers la droite ; haut : distance vers le haut ; Utilisé pour réaliser que certains éléments doivent toujours apparaître devant la fenêtre actuelle, comme le bouton de retour en haut lors de la navigation sur une page, qui apparaîtra toujours à une certaine position sur la page actuelle. Par exemple :
.box {
position: fixed;
top: 100px;
left: 100px;}L'effet est. de la manière suivante :
Lorsque la page atteint le bas Quand , la position du bouton retour en haut dans le coin inférieur droit reste inchangée. Si vous êtes intéressé, vous pouvez continuer à visiter :tutoriel vidéo CSS
.
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!