Maison > Article > interface Web > Éléments positionnés CSS

Éléments positionnés CSS

WBOYavant: 2023-09-16 09:01:091219parcourir

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 -

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!

css Static position

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Comment sélectionner tous les éléments enfants d'un élément (sauf le dernier) en utilisant CSS ?Article suivant：Comment sélectionner tous les éléments enfants d'un élément (sauf le dernier) en utilisant CSS ?

Articles Liés

Voir plus