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!
Comment acheter et vendre du Bitcoin sur okex
Comment implémenter une liste chaînée en go
Comment récupérer des fichiers qui ont été vidés de la corbeille
Outils d'évaluation des entretiens
La différence entre la version familiale Win10 et la version professionnelle
Introduction aux trois composants principaux de hadoop
La différence entre le sommeil et l'hibernation Win10
CDMA télécom
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
