CSS et positionnement absolu : piqûre de rappel
Publié le jeu, 08/10/2009 - 22:49 par robin
Quelques rappels de base sur le positionnement absolu en CSS (illustration par des exemples).
Ce positionnement sort complètement l'élément du flux : il n'est plus dépendant des autres éléments qui l'entourent (frères, parent et ancêtres). Un tel élément est appelé "positionné" (notez qu'un élément en relatif est également dit "positionné" tout en restant dans le flux).
Le positionnement absolu est idéal pour placer tous les conteneurs
généraux, les grandes zones de la page, les éléments uniques (en-tête,
menu, pied de page, …).
Il faut cependant toujours éviter de placer les éléments internes et
"en-ligne (inline)" à l'aide du positionnement absolu : dans ce cas,
utilisez de préférence le positionnement à l'aide des marges.
- Si les valeurs (top, left, bottom, right) sont inexistantes,
l'élément apparaît là où il est déclaré dans la page
(comme pour une position relative).
Il sort du flux et sa hauteur n'est donc pas prise en compte et il va chevaucher ses frères comme le montre l'exemple8 ci-dessous. - Si des valeurs (top, left ,bottom, right) sont spécifiées, l'élément se positionne par rapport au coin supérieur gauche de son premier ancêtre positionné (= le premier "bloc" positionné en relatif, fixe ou absolu en remontant les imbrications => exemple10). S'il n'a pas de parents positionnés, il se positionne par rapport au body (exemple9).
Exemple8 :
HTML:
<body>
<div id="main">
<div id="content">
<p id="p1">......</p>
<p id="p2">......</p>
<p id="p3">......</p>
<p id="p4">......</p>
<p id="p5">......</p>
</div>
</div>
</body>
CSS:
#p3 {
position: absolute;
}
Exemple9 :
HTML:
<body>
<div id="main">
<div id="content">
<p id="p1">......</p>
<p id="p2">......</p>
<p id="p3">......</p>
<p id="p4">......</p>
<p id="p5">......</p>
</div>
</div>
</body>
CSS:
#p3 {
position: absolute;
background-color: red;
top: 0px;
left: 60px;
}
HTML:
<body>
<div id="main">
<div id="content">
<p id="p1">......</p>
<p id="p2">......</p>
<p id="p3">......</p>
<p id="p4">......</p>
<p id="p5">......</p>
</div>
</div>
</body>
CSS:
* {margin: 0;padding: 0;}
#main {
position:relative; /*juste pour positionner ses enfants par rapport à lui */
top: 70px;
background-color:#999999;
}
#p3 {
position: absolute;
background-color: red;
top: 0px; /* le bloc se positionne par rapport au bloc #main */
left: 80px;
width: 200px;
}
Centrage horizontal et vertical des blocs positionnés grâce aux marges négatives:
La technique des marges négatives permet de centrer un bloc dont on
connaît les dimensions. Le centrage pourra être horizontal, vertical ou
les deux à la fois.
Prenons un bloc conteneur de 700px de large et 400px de haut.
Nous voulons qu'il soit centré exactement dans le navigateur quelle que
soit la résolution (800x600, 1024x768 ou plus).
Pour cela, l'astuce est de placer dans un premier temps ce bloc à top 50%
et left 50%, ce qui placera le coin supérieur gauche du bloc au milieu de
page.
Ensuite, nous définirons des marges négatives dont la valeur est
exactement la moitié de la largeur et hauteur du bloc, ce qui le
positionnera au milieu de page.
Voici le code CSS du bloc conteneur :
#global {
position:absolute;
left: 50%;
top: 50%;
width: 700px;
height: 400px;
margin-top: -200px;
margin-left: -350px;
border: 1px solid #000;
}
Il suffit ensuite de placer le conteneur juste en dessous de la balise
<body> :
<div id="global"></div>
Ce tutoriel est distribué sous une licence Creative Commons by-nc-sa 3.0. Consultez la page dédiée aux licences de distributions.
- Tutoriels CSS :
- 3009 lectures
Commentaires :
Poster un nouveau commentaire