Quelle est l'utilisation de l'attribut position en CSS-tutoriel CSS-php.cn

Quelle est l'utilisation de l'attribut position en CSS

coldplay.xixi

Libérer： 2023-01-03 09:30:50

original

5260 Les gens l'ont consulté

Utilisation de l'attribut position en CSS : 1. Les éléments d'étiquette généraux sans aucun attribut de positionnement sont un positionnement statique ; 2. Les éléments positionnés de manière absolue sont retirés du flux de documents ; . Le positionnement fixe est similaire au positionnement absolu, mais il est positionné par rapport à la fenêtre du navigateur et ne défile pas avec la barre de défilement.

Quelle est l'utilisation de l'attribut position en CSS

L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3, ordinateur DELL G3.

Utilisation de l'attribut position en CSS :

1. Positionnement statique (statique)

Les éléments d'étiquette généraux ne sont pas ajoutés. tout attribut de positionnement est un positionnement statique et appartient au flux standard en bas de page.

2. Positionnement absolu (absolu)

Faites glisser l'élément en position absolue du flux de documents et utilisez les attributs gauche, droite, haut, bas et autres par rapport à son la plus petite position. L'élément parent le plus proche avec les paramètres de positionnement est utilisé pour le positionnement absolu. Si le parent de l'élément ne définit pas d'attributs de positionnement, le positionnement est basé sur le coin supérieur gauche de l'élément body comme référence. Les éléments positionnés de manière absolue peuvent être empilés et l'ordre d'empilement peut être contrôlé via l'attribut z-index. La valeur z-index est un entier sans unité, le plus grand étant en haut, et peut avoir des valeurs négatives.

Méthode de positionnement par positionnement absolu :

Si son élément parent définit un positionnement autre que statique, tel que position:relative ou position:absolute et position:fixed, alors il sera relatif. Le positionnement est basé sur son élément parent. La position est spécifiée par les attributs left, top, right et bottom

Si son élément parent n'a pas de positionnement défini, cela dépend si l'élément parent de son élément parent l'a. positionnement set. ,

S'il n'existe toujours pas, continuez à déduire l'élément ancêtre de niveau supérieur. En bref, son positionnement est relatif au premier élément ancêtre avec un positionnement autre que l'ensemble de positionnement statique,

Si tous les éléments ancêtres n'ont pas l'un des trois positionnements ci-dessus, ils seront positionnés par rapport au corps du document (et non par rapport à la fenêtre du navigateur, qui est fixe par rapport à la position de la fenêtre).

<head>
<style type="text/css">
.box {
background: red;
width: 100px;
height: 100px;
float: left;
margin: 5px;
}
.two {
position: absolute;
top: 50px;
left: 50px;
}
</style>
</head>
<body>
<div class="box" >One</div>
<div class="box  two" >Two</div>
<div class="box" >Three</div>
<div class="box">Four</div>
</body>

Copier après la connexion

Positionnez le div avec class="two" à 50px du haut et de la gauche respectivement. Cela modifiera la disposition des autres éléments et ne laissera aucun espace vide dans la position d'origine de cet élément.

3. Positionnement relatif (relatif)

Les éléments positionnés relativement ne peuvent pas être empilés et leurs positions sont décalées dans le flux normal de documents en fonction de la gauche, de la droite, du haut, fond et autres attributs. Vous pouvez également utiliser la conception hiérarchique z-index.

<head>
<style type="text/css">
.box {
background: red;
width: 100px;
height: 100px;
float: left;
margin: 5px;
}
.two {
position: relative;
top: 50px;
left: 50px;
}
</style>
</head>
<body>
<div class="box" >One</div>
<div class="box  two" >Two</div>
<div class="box" >Three</div>
<div class="box">Four</div>
</body>

Copier après la connexion

Positionnez le div avec class="two" à 50px du haut et à gauche de sa position d'origine. Cela ne modifiera pas la disposition des autres éléments, mais laissera un espace vide à la position d'origine de cet élément.

4. Positionnement fixe (fixed)

Le positionnement fixe est similaire au positionnement absolu, mais il est positionné par rapport à la fenêtre du navigateur et ne suit pas la barre de défilement. rouleau.

L'une des utilisations les plus courantes du positionnement fixe consiste à créer un en-tête, un pied de page ou une barre latérale fixe sur la page sans utiliser de marge, de bordure ou de remplissage.

Recommandations d'apprentissage associées : tutoriel 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!