150-image1-fr1234776177.jpg

CSS : positionner un calque (balise div) en position absolute

Savez-vous bien positionner un <div> en "position absolute", c’est à dire positionner un calque en dehors du flux HTML normal ? Sincèrement, je me suis longtemps pris la tête sur ce style CSS sans jamais vraiment bien comprendre comment cela fonctionnait réellement. Un jour, j’ai compris son fonctionnement par le plus grand des hasards : explication…
 
Dans un premier temps, nous allons créer une page HTML avec 2 calques :
 
 
  • calque n°1 (rouge)
  • calque n°2 (vert) contenu dans le calque n°1
 
<html>
<head>
<style>
body{
padding:100px;
}
.div1{
width:200px;
height:200px;
background-color:#ff0000;
border:2px dashed #000000;
}
.div2{
width:200px;
height:200px;
background-color:#00ff00;
border:2px dashed #000000;
}
</style>
</head>
<body>
<div class="div1">
Calque 1
<div class="div2">
Calque 2
</div>
</div>
</body>
</html>
 
Résultat :
 
div position absolute
 
Les 2 calques sont positionnés dans dans le flux HTML normal, le div n°2 étant à l’intérieur du div n°1.
 
Nous allons couper le calque n°2 du flux HTML standart en lui attibuant le style CSS : "position:absolute;". Pour cela, modifiez la classe "div2" de la manière suivante :
 
.div2{
position:absolute;
top:0px;
left:0px;
width:200px;
height:200px;
background-color:#00ff00;
border:2px dashed #000000;
}
 
 Résultat :
 
div position absolute
 
Le div n°2 à quitté le flux HTML (position:absolute) pour ce positionner comme demandé en haut (top:0px;) à gauche (left:0px) de la page. Remarquez que le div n°2 passe par dessus le div n°1, comme si ce dernier n’était pas là.
 
Nous allons maintenant décalé le div n°2 du bord de la page (décalage de 20px du haut et 60px de la gauche) en modifiant à nouveau la classe "div2" :
 
.div2{
position:absolute;
top:20px;
left:60px;
width:200px;
height:200px;
background-color:#00ff00;
border:2px dashed #000000;
}
 
Résultat :
 
 
Comme prévu, le div n°2 s’est décalé du bord gauche et haut de la page.
 
C’est maintenant que les choses deviennent intéressante. Nous allons "positionner" le div n°1 en modifiant sa classe ".div1" :
 
.div1{
position:relative;
width:200px;
height:200px;
background-color:#ff0000;
border:2px dashed #000000;
}
 
Résultat :
 
div position absolute
 
Le div n°2 est désormais positionné par rapport au div n°1 !
Si le div n°1 change de place, le div n°2 le suivra. Pour vérifier, nous allons ajouter simplement une suite de saut de ligne avant le calque n°1 :
 
<body>
<br />
<br />
<br />
<br />
<br />
<div class="div1">
Calque 1
<div class="div2">
Calque 2
</div>
</div>
</body>
 
 Résultat :
 
div position absolute
 
 Voilà !
 
La règle est simple…enfin concentrez-vous quand même 🙂 :
Si vous positionnez un div en position absolute de 10px à gauche et 10px du haut, il se positionnera à 10px à gauche et 10 px du haut de l’angle supérieur gauche du premier conteneur "positionné" dans lequel il se trouve.
 
Si le div ne se trouve dans aucun conteneur "positionné", il se positionnera dans ce cas à 10px à gauche et 10px du haut par rapport à l’angle supérieur gauche de la page web.
 
A vous de jouer !..

Auteur : Fabien Branchut

Fabien Branchut
Concepteur de site web depuis 2001 : développement web et SEO. Co-fondateur et directeur web de l'agence Studio Vitamine depuis 2008 : conception e-commerce, chef de projet, stratégie SEO. Site de Fabien Branchut.

Commentaires Facebook

1 Commentaire

  1. L’idée d’expliquer était bonne, mais je n’ai pas envie de me faire des tests pour visualiser le rendu.
    Dommage, des images d’illustrations auraient été les bienvenues, plus intéressants, plus pédagogiques

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *