-16%
Le deal à ne pas rater :
Le nouveau Aspirateur Robot Roborock S7 à 407,45€ seulement
407.45 € 487.45 €
Voir le deal

Aller en bas
Pêpêche
Pêpêche
Mascotte
Messages : 4528

Les positionnements en CSS Empty Les positionnements en CSS

Lun 20 Mai 2019 - 16:56

Les bases du CSS

Les positionnements

Coucou Smile

Voici une propriété CSS beaucoup utilitisée et utile.

Pour comprendre ce tutoriel, tu dois avoir lu et compris les explications suivantes :
Les bases du HTML
Les principales balises
Lier la CSS et le HTML




En CSS, il existe 5 types de positionnement :
• static,
• relative,
• absolute,
• fixed,
⋅ sticky.

Voyons chacun d'eux.

Dans le détail

position: static;

ce positionnement est le positionnement par défaut.

L'élement se place par rapport à celui qui le précède. On ne l'indique jamais dans la CSS, sauf si on veut réinitialiser le positionnement d'une balise.

position: relative;

Ce positionnement permet :
• d'une part, de déplacer notre élément par rapport à sa position de base ;
•d'autre part, de lui dire "tu deviens une référence". C'est indispensable si cet élément a des balises en position absolue par exemple (voir point suivant).

position: absolute;

Ce positionnement permet de placer un élement par rapport à sa référence. Si aucune référence n'est spécifiée, le bloc se placera par rapport à la fenêtre du navigateur.

Exemple sans référence

Code:
<!DOCTYPE html>
<html lang="fr">
<head>
 <meta charset="utf-8">
 <meta name="description" content="Et voilà la description de ma première page html" />
 <title>Positionnement</title>
 
 <style type="text/css">
 .absolu{
 position:absolute;
 top:20px;
 left:50px;
 background:green;
 color:white;
 font: 12px/50px verdana;
 text-align:center;
 width:400px;
 height:50px;
 }
 </style>

</head>

<body>
 <div class="absolu">
 Ce bloc est en position absolu, sans référence.
 </div>
</body>
</html>
rendu:
Les positionnements en CSS Positionnement1_zps487700a8

Exemple avec une référence

Code:
<!DOCTYPE html>
<html lang="fr">

<head>
 <meta charset="utf-8" />
 <meta name="description" content="Et voilà la description de ma première page html" />
 <title>Positionnement</title>
 
 <style type="text/css">
 .relative{
 position:relative;
 margin:auto;
 background:#999;
 color:white;
 font: 18px/26px verdana;
 text-align:center;
 width:800px;
 height:200px;
 }
 
 .absolu{
 position:absolute;
 top:20px;
 left:50px;
 background:green;
 color:white;
 font: 12px/50px verdana;
 text-align:center;
 width:400px;
 height:50px;
 }
 </style>
 
</head>

<body>

 <div class="relative">
 <p>Mon petit texte est dans mon bloc en position relative ^^</p>
 
 <div class="absolu">
 Ce bloc est en position absolu, avec une référence.
 </div>
 </div>
 
</body>
</html>
rendu:
Les positionnements en CSS 2016-03-27_131709_zps3s53djho

Idea Cette fois, tu vois bien que mon bloc en position absolue se place par rapport au bloc en position relative et non pas par rapport à la fenêtre.

position: fixed;

Le principe est le même que pour la position absolue, si ce n'est que cette fois, le bloc reste à la même place qu'on scroll ou non, qu'on réduise la fenêtre ou non. La position du bloc est définie par rapport à la fenêtre du navigateur.
   
position: sticky;

Fût un temps, à chaque fois qu'on voulait faire se déplacer un bloc en même temps que l'on scroll, il fallait utiliser du javascript. Cette époque est révolue grâce à cette propriété CSS. En effet, une fois que tu as défini l'un de ses parents comme une référence, cet élément "sticky" restera visible à l'écranà la place que tu as défini par rapport à ce parent, tant que ce dernier est visible.
   
Voyons un exemple ça sera plus simple : clic (pour voir les codes HTML & CSS, il faut cliquer sur Open Sandbox en bas à droite).

Dans cet exemple, tu peux voir que mon "body" a une position relative : c'est la référence pour mon bloc en "sticky" qui est la navigation (balise nav). Tu peux également voir que cette balise a un top à 0. Qu'est-ce que ça signifie ? Eh bien en fait, on dit au code : "tant que le body est visible, ma nav restera fixé en haut de la partie visible de celui-ci, même si j'ai scrollé dans l'écran et que, logiquement, ce bloc devrait avoir disparu".
   
Idea Si on prend l'exemple du forum, les post des sujets sont en position "relative" et les "postprofile" sont en position sticky avec un top de 40px (pour être placé à 40px du bord haut de la partie visible de nos sujets.

Comment définir la position ?

Comme tu l'as peut-être remarqué dans la CSS, j'ai utilisé :
Code:
top
left

Eh oui ! Avec les positionnements, on utilise :
top : pour placer le haut de l'élement par rapport à sa référence ;
left : pour placer le bord gauche de l'élement par rapport à sa référence ;
right : pour placer le bord droit de l'élement par rapport à sa référence ;
bottom : pour placer le bas de l'élement par rapport à sa référence.

Idea N'hésite pas à jeter un oeil à cet article ou à celui-ci (pour avoir plus de précision sur la position sticky.




Si tu as des questions sur les positionnements, n'hésite pas à nous les poser à la suite de ce message.


Revenir en haut
Permission de ce forum:
Vous pouvez répondre aux sujets dans ce forum
Les coups de ♥ des Râleuses



Post-It des Râleuses