L'attribut position est utilisé pour positionner les éléments. c'est-à-dire que les éléments suivants sont positionnés -
static - la boîte d'éléments est disposée dans le cadre du flux normal de documents, comme suit l'élément avant et l'élément après le précédent.
relative - La boîte de l'élément est disposée dans le cadre du flux normal puis décalée d'une certaine distance.
Absolu - La boîte de l'élément est disposée par rapport à son bloc conteneur et est complètement supprimée du flux normal du document.
Fixe - La boîte de l'élément est en position absolue, avec tous les comportements décrits pour la position : absolue.
Voici le code pour positionner un élément en utilisant CSS -
Démonstration en direct
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
div {
color: white;
text-align: center;
height: 100px;
width: 100px;
}
.static {
position: static;
background-color: greenyellow;
}
.relative {
position: relative;
left: 50px;
background-color: rgb(255, 47, 47);
}
.absolute {
position: absolute;
right: 50px;
top: 20px;
background-color: hotpink;
}
</style>
</head>
<body>
<h1>Position elements example</h1>
<div class="static">STATIC</div>
<div class="relative">RELATIVE</div>
<div class="absolute">ABSOLUTE</div>
</body>
</html>Le code ci-dessus produira la sortie suivante -
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!
Caractéristiques du réseau
Comment conserver le nombre de décimales en C++
Comment configurer l'actualisation automatique d'une page Web
Comment résoudre une syntaxe invalide en Python
Comment devenir un ami proche sur TikTok
barre de lancement gratuite
serveur Web
À quel point Dimensity 9000 équivaut-il à Snapdragon ?
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
