Les positions & le z-index
Bonjour à tous,
Ici je vais m'attaquer à ce tutoriel avec Angelusia (qui fera les transitions), n'hésitez pas à venir déposer vos idées et propositions d'améliorations !
Tout d'abord, je tiens à préciser que ce tutoriel a été réalisé sous Mozilla Firefox, certaines explications devront être adapté au navigateur que vous utilisez.
Les positions
A quoi sert les positions ? Et bien tout simplement à agencer vos différents "blocs" pour créer un site/forum agréable à regarder (aussi appelé "la mise en page").
Il existe cinq valeurs possibles pour la propriété CSS "position" :
-static
-relative
-absolute
-fixed
-inherit
Note: Pour la suite du tutoriel, j'utiliserais des carrés de couleurs différentes pour montrer les différents blocs.
La position static
La position "static" est la position par défaut de vos différents blocs.
Exemple:
- Code:
<div ID="blue">
</div>
<div ID="red">
</div>
- Code:
#blue{
width: 50px;
height: 50px;
background-color: blue;
}
#red{
width: 50px;
height: 50px;
background-color: red;
}
La position absolute
La position "absolute" est une position qui va peut-être vous paraitre difficile à appréhender, mais elle peut s'avérer utile, elle définit le bloc par rapport aux bords de la page web, non plus par rapport aux autres blocs. Si vous créez un bloc avec une position absolute sans avoir prévu de la place pour celui-ci avant, il est fort probable que votre bloc recouvre une partie de votre site/forum.
Ici je définis un bloc qui englobe mes deux carrés pour qu'ils ne s'affichent pas devant le texte que j'écris.
Exemple:
- Code:
<div ID="container">
<div ID="blue"></div>
<div ID="red"></div>
</div>
- Code:
#container{
border: 1px black solid;
width: 100px;
height: 50px;
}
#blue{
position: absolute;
width: 50px;
height: 50px;
background-color: blue;
}
#red{
position: absolute;
width: 50px;
height: 50px;
background-color: red;
}
Vous vous demandez probablement pourquoi il n'y a plus de carré bleu ? En fait, le carré bleu n'a pas disparu. Il est juste passé derrière le carré rouge, souvenez vous, j'ai écrit juste avant que la position "absolute" positionnait les différents blocs en fonction des bords de la page ! Les deux blocs sont ainsi au même endroit.
Il suffit alors de modifier le placement d'un des deux carrés pour faire apparaitre l'autre. Ici, je déplace mon carré rouge de 50 pixel sur la droite (mes carrés font 50*50 pixels), grâce à une margin-left de 50px pour lui donner sa position dans ma div qui englobe ces deux carrés.
Exemple:
- Code:
<div ID="container">
<div ID="blue"></div>
<div ID="red"></div>
</div>
- Code:
#container{
border: 1px black solid;
width: 100px;
height: 50px;
}
#blue{
position: absolute;
width:50px;
height: 50px;
background-color: blue;
}
#red{
position: absolute;
width:50px;
height: 50px;
background-color: red;
margin-left: 50px;
}
Le margin-left définit le placement de mon carré rouge par rapport à ma div qui englobe ces deux carrés. Que se passerait-il si je définissais le placement de ce carré rouge avec par exemple un "left: 50px" à la place du margin-left ?
Exemple:
- Code:
<div ID="container">
<div ID="blue"></div>
<div ID="red"></div>
</div>
- Code:
#container{
border: 1px black solid;
width: 100px;
height: 50px;
}
#blue{
position: absolute;
width:50px;
height: 50px;
background-color: blue;
}
#red{
position: absolute;
width:50px;
height: 50px;
background-color: red;
left: 50px;
}
Le carré rouge est alors placé en fonction du bord de la page qui l'entoure. Le carré rouge est placé en fonction de la page et non en fonction de la division qui l'entoure. Faites très attention à toujours contrôler vos blocs avec la position "absolute", essayez de toujours imbriquer un bloc en position "absolute" dans un bloc en position "relative".
La position "absolute" est une notion assez difficile à comprendre, c'est pourquoi beaucoup de personnes vous déconseillerons de l'utiliser et de ne l'utiliser qu'en cas de dernier secours.
La position fixed
La position "fixed", c'est en réalité la même propriété que la position "absolute", avec un petit changement. Normalement (sans la position "fixed"), quand vous faites défiler la page web (de haut en bas, ou de gauche à droite) les différents blocs de votre page web/forum se déplace en conséquence.
Et bien avec la position "fixed", ils ne se déplaceront plus avec la page, ils resteront là où vous leur avez dit de rester. C'est notamment cette position qui est utilisée pour les barres de menu sur de nombreux forum. Je ne peux pas vous faire de démonstration, sinon vous verriez un carré rouge et un carré bleu durant tout le tutoriel et ils vous masqueraient le tuto
.Il faut toujours définir la position d'un bloc fixe avec les propriétés "top" ou "bottom" et "right" ou "left".
La position inherit
Que dire sur la position "inherit"... ? Le bloc qui a pour position "inherit" va hériter de la position du bloc dit "parent". Comme un exemple vaut toujours plus qu'un long discours...
Exemple:
- Code:
<div ID="container">
<div ID="blue">
<div ID="red"></div>
</div>
</div>
- Code:
#container{
position: relative;
border: 1px black solid;
width: 100px;
height: 100px;
}
#blue{
position: absolute;
width:100px;
height: 100px;
background-color: blue;
}
#red{
position: inherit;
width:50px;
height: 50px;
top: 25px;
left: 25px;
background-color: red;
}
Ici, le bloc parent du carré rouge est le carré bleu. Ce carré bleu a pour position "absolute", alors la position du carré rouge est donc considéré comme "absolute".
Personnellement, je n'ai quasi-jamais utilisé cette propriété de position, vous ne devriez pas souvent le croiser, mais il est toujours bon de savoir à quoi ça correspond ! : )
La position relative
C'est cette position que vous verrez le plus souvent. En utilisant cette position, vous pourrez placer votre bloc comme bon vous semble. Les blocs avec cette position seront toujours placée en fonction des autres bloc se trouvant dans le même "espace".
Exemple:
- Code:
<div ID="container">
<div ID="blue"></div>
<div ID="red"></div>
</div>
- Code:
#container{
border: 1px black solid;
width: 50px;
height: 100px;
}
#blue{
position: relative;
width:50px;
height: 50px;
background-color: blue;
}
#red{
position: relative;
width:50px;
height: 50px;
background-color: red;
}
Ici, c'est comme si je n'avais utilisé aucune position. Cependant, si j'avais fait un bloc "parent" moins grand que les deux blocs "enfant" qui sont en position relative, il y aurait eu un chevauchement entre les blocs "enfant" et le bloc "parent".
Et comme nos carrés sont en position "relative", on va pouvoir les déplacer ! Un exemple tout bête, je déplace le carré rouge de 25px sur le haut et 25px sur la droite.
Exemple:
- Code:
<div ID="container">
<div ID="blue"></div>
<div ID="red"></div>
</div>
- Code:
#container{
border: 1px black solid;
width: 50px;
height: 100px;
}
#blue{
position: relative;
width:50px;
height: 50px;
background-color: blue;
}
#red{
position: relative;
width:50px;
height: 50px;
background-color: red;
top: -25px;
left: 25px;
}
Ici, je n'ai pas redimensionné mon bloc "parent", cela a donc engendré un chevauchement.
Alors, comment faire pour que nos blocs ne se chevauchent pas ? Et bien, il faut étendre le bloc "parent". Vous pouvez tout aussi bien mettre les valeurs width: 100px; et height: 100%; dans le bloc parent pour que celui-ci prenne la totalité de son contenu (attention, le travail avec les pourcentages peut être dangereux, une mauvaise manipulation et quand vous ou vos visiteurs aurez une autre résolution d'écran, ce sera la catastrophe, il n'y aura plus rien de proportionné.
Exemple:
- Code:
<div ID="container">
<div ID="blue"></div>
<div ID="red"></div>
</div>
- Code:
#container{
border: 1px black solid;
width: 100px;
height: 100%;
}
#blue{
position: relative;
width:50px;
height: 50px;
background-color: blue;
}
#red{
position: relative;
width:50px;
height: 50px;
background-color: red;
top: -25px;
left: 25px;
}
Nous voyons alors une chose étrange. Le bloc parent descend plus bas que le carré rouge ! C'est normal, j'ai utilisé les propriétés "top" et "left", et celle-ci "n’interagisse" pas directement avec le bloc parent. Si j'avais voulus que mon bloc parent ai la bonne taille en hauteur, j'aurais utilisé des "margin".
Le Z-Index
A quoi sert le z-index ?
Eh bien, le z-index associé à des positions comme "absolute", "fixed" et "relative", permet de définir quel bloc aura la priorité d'affichage sur l'autre lors d'un chevauchement.
Quand le chiffre dans le z-index est plus élevé que celui d'un bloc se situant sur la même zone, c'est ce bloc qui sera alors affiché.
Je m'explique, dans les précédents exemples, le carré rouge était passé par-dessus le carré bleu.
Rappel:
- Code:
<div ID="container">
<div ID="blue"></div>
<div ID="red"></div>
</div>
- Code:
#container{
border: 1px black solid;
width: 100px;
height: 100%;
}
#blue{
position: relative;
width:50px;
height: 50px;
background-color: blue;
}
#red{
position: relative;
width:50px;
height: 50px;
background-color: red;
top: -25px;
left: 25px;
}
Si j'applique un z-index: 12; sur le carré bleu, et un z-index: 10; sur le carré rouge, le carré bleu passera devant le carré rouge.
Exemple:
- Code:
<div ID="container">
<div ID="blue"></div>
<div ID="red"></div>
</div>
- Code:
#container{
border: 1px black solid;
width: 100px;
height: 100%;
}
#blue{
position: relative;
width:50px;
height: 50px;
background-color: blue;
z-index: 12;
}
#red{
position: relative;
width:50px;
height: 50px;
background-color: red;
top: -25px;
left: 25px;
z-index: 10;
}
Cette propriété peut-être très pratique et peut être amusante aussi. N'hésitez pas à faire des tests avec le z-index. Vous pouvez attribuer n'importe quelle valeur au z-index, mais essayez quand même de faire quelque chose de propre, par exemple, n'utilisez pas un z-index: 9999; sur un bloc pour qu'il soit au-dessus d'un bloc avec un z-index: 10; .
Voici un exemple de ce que vous pouvez faire avec le z-index:
Ceci est un ensemble de carré imbriqué de sorte qu'ils donnent une autre forme avec différentes nuances de bleu.
Dernière édition par Scavenger le Mar 19 Mar 2013 - 14:43, édité 5 fois
