Position
Définition : Flottant
La propriété float enlève la boite du flux normal et la positionne en haut à droite ou à gauche dans son parent. Les autres éléments en ligne l'entourent.
<div>
<div></div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pretium ultrices enim, sit amet ultricies nulla placerat suscipit. Pellentesque aliquet, erat non luctus blandit, mauris eros dignissim arcu, nec consequat neque erat at elit. Duis rutrum vitae risus vitae bibendum.
</div>
div div {
float: left;
width: 50px;
height: 50px;
border: 2px solid brown;
}
Définition : Position relative
position : relative;
La position relative permet de déplacer une boite par rapport à son emplacement. Sa position d'origine n'est pas remplacée.
Les propriétés left et top donnent la valeur du déplacement.
<div>
<div>boite1</div>
<div class="div2">boite2</div>
<div>boite3</div>
</div>
div div {
width: 100px;
height: 100px;
border: 2px solid gray;
background-color: burlywood;
}
div div.div2 {
position: relative;
left: 80px;
top: 50px;
background-color: brown;
}
Définition : Position absolue
position : absolute;
La position absolute enlève la boite de son flux normal. Sa position d'origine est remplacée par l'élément qui suivait.
Le décalage se fait par rapport à son premier parent positionné.
<div>
<div>boite1</div>
<div class="div2">boite2</div>
<div>boite3</div>
</div>
div {position: absolute;
}
div div {
width: 100px;
height: 100px;
border: 2px solid gray;
background-color: burlywood;
}
div div.div2 {
position: absolute;
left: 80px;
top: 50px;
background-color: brown;
}
Définition : Position fixe
position : fixed;
La position fixed enlève la boite de son flux normal. Sa position d'origine est remplacée par l'élément qui suivait.
Le décalage se fait par rapport au bloc englobant (en général la page).
Définition : Ordre d'empilement
Lorsque plusieurs boites se superposent, la dernière créée se trouve au dessus.
Cet ordre peut être modifié grâce à la propriété z-index.
<div>
<div>boite1</div>
<div class="div2">boite2</div>
<div class="div3">boite3</div>
</div>
div {position: absolute;
}
div div {
width: 100px;
height: 100px;
border: 2px solid gray;
}
div div.div2 {
position: absolute;
left: 20px;
top: 50px;
background-color: burlywood;
z-index: 3;
}
div div.div3 {
position: absolute;
left: 80px;
top: 10px;
background-color: brown;
z-index: 2;
}