Bonjour,
Dans ce tutoriel, je vais vous apprendre à modifier la position d'éléments html(div) mais aussi de modifier l'ordre des éléments comme des calques(layers).
Pour modifier la position d'un élément en CSS, il faut simplement utiliser la propriété CSS position.
La propriété CSS position peut avoir plusieurs valeurs:
- static
- absolute
- relative
- fixed
static
la valeur static est la valeur par défaut pour la propriété position en CSS.
Elle dis simplement que l'élément est statique.
absolute
La valeur absolute signifie que la position de l'élément sera faite par rapport à la page au complet.
relative
La valeur relative signifie que la position de l'élément sera faite par rapport à sa position d'origine.
fixed
La valeur fixed signifie que la position de l'élément sera faite par rapport à canvas de la page.
En gros, c'est la même chose que absolute sauf que lorsque vous défilerez la page, l'élément restera fixe.
Bon maintenant vous connaissez comment définir le type de positionnement. Je vais vous montrer comment positionner un élément.
Il existe quatre propriétés CSS pour faire ça:
Vous l'aurez compris, top nous permet de déplacer notre élément par rapport au point d'origine top. le point d'origine top peut varier selon le type de positionnement comme dis plus haut.
Les propriétés top,right,bottom et left ne peuvent pas être utilisée lorsque le type de positionnement de l'élément est statique.
Bon voici des exemples et leurs codes:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Position d'éléments en CSS</title>
<style type="text/css">
*
{
margin:0px;
padding:0px;
}
body
{
padding-left:5px;
}
.remarque
{
background:#a0ffa0;
border:1px solid #508050;
padding:3px;
}
.parent_1, .parent_2, .parent_3, .parent_4
{
border:1px solid #999999;
background:#cccccc;
padding:5px;
margin:10px;
width:500px;
}
.elem_1, .elem_2, .elem_3, .elem_4
{
border:1px solid #666666;
background:#999999;
padding:5px;
}
.elem_1
{
position:absolute;
top:40px;
}
.elem_2
{
position:relative;
top:30px;
left:100px;
}
.elem_3
{
position:fixed;
top:5px;
right:5px;
}
.elem_4
{
position:static;
}
</style>
</head>
<body>
<h1>Utiliser les positions en CSS</h1>
<br /><br /><br />
<div class="parent_1">
Parent de l'élément 1
<div class="elem_1">
Élément 1 en position absolute Top:40px
<div class="remarque">
<em>Remarque</em>: Position par raport à la page complète.
</div>
</div>
</div>
<br /><br /><br />
<div class="parent_2">
Parent de l'élément 2
<div class="elem_2">
Élément 2 en position relative Top:30px Left:100px
<div class="remarque">
<em>Remarque</em>: Position par raport à sa position normale
</div>
</div>
</div>
<br /><br /><br />
<div class="parent_3">
Parent de l'élément 3
<div class="elem_3">
Élément 3 en position fixed Top:0px Right:0px
<div class="remarque">
<em>Remarque</em>: Reste fixe(ne bouge pas) lors du défilement de la page.<br/>Position par rapport à la page complète.
</div>
</div>
</div>
<br /><br /><br />
<div class="parent_4">
Parent de l'élément 4
<div class="elem_4">
Élément 4 en position static<br />
<div class="remarque">
<em>Remarque</em>: Valeur par défaut, aucun changement.
</div>
</div>
</div>
<br /><br /><br />
Défilez la page pour voir l'effet de l'élément 3
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</body>
</html>Essayer
Modifier l'ordre des calques
Pour modifier l'ordre des élément, il existe la propriété CSS z-index.
La propriété z-index permet de jouer avec les élément comme des calques(layers) dans un logiciel d'imagerie.
Z-index peut avoir comme valeur un nombre entier pouvant être négatif et positif.
La valeur par défaut de z-index est 0.
La propriété z-index ne peut pas être utilisée lorsque le type de positionnement de l'élément est statique.
c'est un peu comme les quatre propriétés pour positionner un élément sauf que là, il s'agit d'un positionnement dans l'axe des Z(profondeur).
Si nous avons deux éléments, celui ayant le plus grand z-index sera placé devant.
Bon voici encore une fois des exemples et leur codes:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Les calques en CSS avec le z-index</title>
<style type="text/css">
*
{
margin:0px;
padding:0px;
}
body
{
padding-left:5px;
}
.remarque
{
background:#a0ffa0;
border:1px solid #508050;
padding:3px;
}
.elem_1, .elem_2, .elem_3, .elem_4
{
border:1px solid #666666;
background:#999999;
padding:50px;
width:200px;
text-align:center;
}
.elem_1
{
position:static;
z-index:200;
}
.elem_2
{
position:absolute;
top:100px;
left:200px;
z-index:5;
}
.elem_3
{
position:relative;
top:-70px;
left:195px;
z-index:-5;
}
.elem_4
{
position:fixed;
top:200px;
left:400px;
z-index:10;
}
</style>
</head>
<body>
<h1>Les calques(z-index) en CSS</h1>
<br /><br /><br /><br /><br /><br /><br /><br />
<div class="elem_1">
Un calque en position static avec un z-index de 200
</div><br />
<div class="elem_2">
Un calque en position absolute avec un z-index de 5
</div><br />
<div class="elem_3">
Un calque en position relative avec un z-index de -5
</div><br />
<div class="elem_4">
Un calque en position fixed avec un z-index de 10
</div><br />
</body>
</html>
 Essayer
La position fixed ne fonctionne pas sous Internet Explorer.
Pour toutes questions ou commentaires, contacter moi par MP, en utilisant le formulaire de contact ou encore vous pouvez poser votre problème dans le forum.
Merci, j'espère que vous avez aimé ce tutoriel et qu'il vous sera utile.
Scripts et Tutoriels similaires
Le 29/07/2013 à 05:23:37
Ouvrir une nouvelle fenêtre (Pop-up) et la centrer en javascript
Effectuer translation, rotations, redimentionnements en flash, ActionScript 2 et 3
Detecter la position de la souris flash, ActionScript 2 et 3
Changer l'opacité d'un div(alpha) compatibles avec tous les navigateurs
Simple PHP Forum Script - Forum en php facile simple script code telecharger forum php gratuit mysql