Maison >interface Web >tutoriel CSS >Éléments positionnés CSS
Éléments positionnés CSS
- WBOYavant
- 2023-09-16 09:01:091236parcourir
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 -
Exemple
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>Sortie
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!