Quelles sont les trois méthodes de positionnement du CSS-tutoriel CSS-php.cn

Quelles sont les trois méthodes de positionnement du CSS

青灯夜游

Libérer： 2021-11-02 12:00:58

original

12631 Les gens l'ont consulté

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;".

Quelles sont les trois méthodes de positionnement du CSS

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;

Copier après la connexion

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>

Copier après la connexion

Positionnement fixe

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

position:fixed;

Copier après la connexion

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>

Copier après la connexion

Positionnement absolu

position:absolute;

Copier après la connexion

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>

Copier après la connexion

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;
}

Copier après la connexion

(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!