Le positionnement est utilisé lorsqu'un chevauchement se produit sur la page.
1. Positionnement fixe : position : fiexd
N'occupe pas la position d'origine par rapport au navigateur (hors flux documentaire)
<style>
#d1{
width: 200px;
height: 200px;
background-color: red;
position: fixed;
top: 300px;
left: 300px;
}
</style>
<body>
<div id="d1">我是第一个div</div>
</body>
Rendus :
2. Positionnement relatif : position : relative ;
Le positionnement relatif ne sortira pas du flux de documents, par rapport à sa propre position
<style>
#d1{
width: 200px;
height: 200px;
background-color: red;
position:relative;
top: 300px;
left: 300px;
}
</style>
<body>
<div id="d1">我是第一个div</div>
</body>
3. Positionnement absolu : position : absolue ;
N'occupe pas la position d'origine (hors flux documentaire), par rapport à qui va changer, si l'élément ancêtre le plus proche a un attribut de positionnement, il sera relatif à l'élément, sinon, il sera relatif au corps
<style>
#d1{
width: 200px;
height: 200px;
background-color: red;
position: absolute;
top: 300px;
left: 300px;
}
</style>
<body>
<div id="d1">我是第一个div</div>
</body>
Généralement, on utilise la méthode du père et du fils pour localiser, par exemple :
<style>
#mydiv{
width: 500px;
height: 500px;
background-color: orange;
position: relative;
}
#d1{
width: 200px;
height: 200px;
background-color: red;
position: absolute;
top: 300px;
left: 300px;
}
</style>
</head>
<body>
<div id="mydiv">
<div id="d1">我是第一个div</div>
</div>
</body>
Image d'effet :
on peut voir que "Je suis le premier div" est positionné par rapport à l'élément parent mydiv.
4. Positionnement statique : position : statique ;
La valeur par défaut de la propriété positioning position est statique. Sous ce positionnement, les paramètres haut, gauche, bas et droite sont tous invalides.
5. Indice z hiérarchique
z-index définit le niveau et la valeur inférieure sera écrasée par la valeur supérieure.
(1). Si Absolute est défini pour tous les éléments enfants, alors tous les éléments enfants seront empilés ensemble et se couvriront.
(2). La condition préalable à l'utilisation de z-index : vous devez définir l'attribut de positionnement
(3). Vous ne peut ajuster que les frères et sœurs, mais pas le père et le fils. Le fils couvre toujours le père
(4). Plage de valeurs : -1 ~ 999. -1 est la couche inférieure. Il est suggéré que le cadre contextuel soit le fils du corps.
Avant de régler le niveau :
<style>
#mydiv{
width: 500px;
height: 500px;
background-color: blue;
position: relative;
}
#d1{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top: 100px;
left: 100px;
}
#d2{
width: 200px;
height: 200px;
background-color: orange;
position: absolute;
top: 100px;
left: 100px;
}
#d3{
width: 300px;
height: 300px;
background-color: green;
position: absolute;
top: 100px;
left: 100px;
}
</style>
</head>
<body>
<div id="mydiv">
<div id="d1">我是第一个div</div>
<div id="d2">我是第二个div</div>
<div id="d3">我是第三个div</div>
</div>
</body>
Après avoir défini la hiérarchie :
<style>
#mydiv{
width: 500px;
height: 500px;
background-color: blue;
position: relative;
}
#d1{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top: 100px;
left: 100px;
z-index: 3;
}
#d2{
width: 200px;
height: 200px;
background-color: orange;
position: absolute;
top: 100px;
left: 100px;
z-index: 2;
}
#d3{
width: 300px;
height: 300px;
background-color: green;
position: absolute;
top: 100px;
left: 100px;
z-index: 1;
}
</style>
</head>
<body>
<div id="mydiv">
<div id="d1">我是第一个div</div>
<div id="d2">我是第二个div</div>
<div id="d3">我是第三个div</div>
</div>
</body>
