Maison > Article > interface Web > Quelles sont les trois méthodes de positionnement du CSS

Quelles sont les trois méthodes de positionnement du CSS

青灯夜游original: 2021-11-02 12:00:5812490parcourir

Les trois méthodes de positionnement du CSS sont : 1. Positionnement relatif, la position de l'élément est calculée par rapport à sa position d'origine, la syntaxe "position:relative;" 2. Positionnement fixe, la syntaxe "position:fixed;" ; 3 , Positionnement absolu, syntaxe "position:absolute;".

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

Positionnement relatif

La position de l'élément est calculée par rapport à sa position d'origine.

position:relative;

Il fait référence au point d'origine du parent comme point d'origine par défaut et est positionné en haut, à droite, en bas et à gauche.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>相对定位</title>
<style type="text/css">
.king{
margin-top: 30px;
margin-left: 30px;
border: 1px solid silver;
background-color: skyblue;
width: 40%;
}
.king div{
width: 100px;
height: 60px;
margin: 10px;
background-color: snow;
color: black;
border: 1px solid black;
}
.three{
position: relative;
top: 20px;
left: 50px;
}
</style>
<body>
<div class="king">
<div class="one">one</div>
<div class="two">two</div>
<div class="three">three</div>
<div class="four">four</div>
</div>
</body>
</html>

Positionnement fixe

L'élément fixe ne changera pas de position lorsque la barre de défilement est déplacée.

position:fixed;

Par défaut, la position de l'élément de positionnement fixe est relative au navigateur et est utilisée en conjonction avec les quatre attributs haut, bas, gauche et droite.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>固定定位</title>
<style type="text/css">
.first{
width: 50px;
height: 160px;
border: 1px solid gray;
background-color: #b7f1b7;
}
.second{
position: fixed;
top: 50px;
left: 160px;
width: 150px;
height: 100px;
border: 1px solid silver;
background-color:#b7f1b7;
}
</style>
<body>
<div class="first">div元素</div>
<div class="second">固定定位的div元素</div>
</body>
</html>

Positionnement absolu

position:absolute;

Par défaut, la position du positionnement absolu est relative au navigateur et est positionnée en haut, à droite, en bas et à gauche. La propriété

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>绝对定位</title>
<style type="text/css">
.king{
padding: 15px;
border: 1px solid silver;
background-color: skyblue;
width: 30%;
}
.king div{
padding: 10px;
}
.one{
background-color: chartreuse;
}
.two{
background-color: cyan;
position: absolute;
top: 20px;
right: 40px;
}
.three{
background-color: darkred;
}
.four{
background-color: dimgrey;
}
</style>
<body>
<div class="king">
<div class="one">one</div>
<div class="two">two</div>
<div class="three">three</div>
<div class="four">four</div>
</div>
</body>
</html>

z-index

z-index définit l'ordre d'empilement des éléments. Les éléments avec un ordre d'empilement supérieur apparaîtront toujours devant les éléments avec un ordre d'empilement inférieur.

Les éléments peuvent avoir des valeurs d'attribut z-index négatives.
Z-index ne fonctionne que sur les éléments positionnés (tels que position:absolute;)

Valeurs d'attribut : auto : Par défaut, l'ordre d'empilement est égal à l'élément parent. number : Définissez l’ordre d’empilement des éléments. hériter : Spécifie que la valeur de l'attribut z-index doit être héritée de l'élément parent.

Exemple : Définissez le z-index de l'image :

img{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}

(Partage vidéo d'apprentissage : Tutoriel vidéo 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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：8 codes d'effet CSS pratiques qui valent la peine d'être collectés (partagés)Article suivant：8 codes d'effet CSS pratiques qui valent la peine d'être collectés (partagés)

Articles Liés

Voir plus