L'essentiel des CSS

Comprendre le positionnement

Testez gratuitement nos 1271 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Abordez le positionnement des éléments en vous servant de la propriété Position. Vous allez explorer les trois principales valeurs de cette propriété et comprendre comment l'utiliser au mieux.
07:49

Transcription

Une autre alternative qui permet de positionner les éléments dans CSS va être d'agir sur la propriété position. Alors, pour démontrer les diverses possibilités que nous offre la propriété, voyons un premier fichier, déjà, qui va simplement être constitué de 20 balises DIV qui seront simplement formatées avec une bordure et une couleur d'arrière-plan, hauteur, largeur et marge, de façon à rentrer dans le flux de lecture du navigateur, les unes derrière les autres, comme tout bon type bloc. Alors la propriété position peut prendre 4 valeurs différentes : statique, relative, fixed, et absolute. La propriété statique, c'est la propriété par défaut. Il y a jamais besoin de la définir. Sauf quand vous voudrez casser une propriété, si vous avez déjà défini par exemple à relative, fixed ou absolute, vous voulez la supprimer, une façon de la supprimer va être de la remettre en statique. Commençons par la propriété relative. Je vais placer une classe à cet élément : relative. Et je vais venir jouer sur la classe, relative, ici, en disant cet élément-là, je vais jouer sur sa position, donc : position, et je vais la mettre relative. Si j'actualise ma page, il ne se passe strictement rien. Par contre cet élément a une position relative. Relative à lui-même. Donc par défaut si on n'a rien défini, elle est de (0;0), mais imaginons qu'on mette sa propriété top à 50 pixels et si on place sa propriété left à 50 pixels également... Regardez ce qui va se passer. J'enregistre, j'actualise, et cet élèment va se décaler de 50 pixels dans sa position relative. Mais il sort pas du flux. C'est-à-dire que l'élément n°04, ici, ne rentre pas derrière. Il reste là où il est. Et lui il est sorti de sa position. Sa vraie position de flux est là, mais relativement à lui-même, il est décalé de 50 pixels dans le top, et 50 pixels dans le left. C'est super. Alors que va-t-il se passer si je fais flotter mes éléments, là ? Tous les DIV, je les fais flotter. Rappelez-vous juste avant. Ils vont se mettre à flotter les uns derrière les autres. Et le 03, il reste toujours relatif, pareil, par rapport à sa position. Il n'est pas sorti du flux, bien qu'il flotte, il reste toujours là où il devrait être, mais relativement à lui-même, il s'est décalé de 50 pixels. Alors, maintenant on a une autre propriété qui était fixed. Alors on va prendre la 05, ici, je vais rajouter une classe, et égal à fixed. Donc ici, si j'actualise, tout est redevenu normal, ça flotte pas. L'autre, il est toujours relatif. Et ici je vais dire que la position fixe, c'est une position fixed. Alors là, regardez bien ce qu'il va se passer dès qu'on va actualiser. Si j'actualise ma page, le 06, lui, il est monté, et il s'est positionné au-dessus, à 10, et le 05, qui arrive derrière, il se positionne comme ça, par contre il ne bouge plus. Il est resté fixe. Maintenant, cet élément-là, il est sorti du flux et il est resté fixe. C'est le genre de manipulations que vous voyez pour les barres de navigation situées en bas de la fenêtre, qui restent en bas de la fenêtre, ou des petites icônes, remonter, l'icône remonter au top, plutôt que d'aller la chercher on peut la laisser fixe ici. On peut avoir des télécommandes, des boutons sur le côté, des ronds qui vont rester quand vous les survolez, ils sortent, et puis, quand vous naviguez dans la page ils vont rester sur le côté. Faites attention dans les vieilles versions d'IE, ce n'était pas pris en compte. Par contre, la position est quand même relativement ancienne. Alors, maintenant, pour explorer la dernière qui est la position absolue, c'est un tantinet plus tordu. Revenons ici. Si je reviens dans ma partie, qu'est-ce que j'ai ? J'ai deux conteneurs. Un conteneur, un contenu. Deux DIV. Un div qui a le mot conteneur dans un texte flottant, ici. Et une balise DIV à l'intérieur qui contient du contenu qui est passé à l'intérieur du conteneur. Parfait. Donc maintenant, si je rentre dans la partie conteneur, je vais pouvoir définir un certain nombre de propriétés. Comme par exemple, on va pouvoir définir une largeur qui serait égale par exemple, à 400 pixels. Donc width de 400 pixels. On pourrait définir height de 300 pixels. Définir une couleur d'arrière-plan et une couleur de premier plan d'écriture. Et puis on va rester tel quel, Control+S, ça me va très bien. Si je place, maintenant un contenu, la classe contenu, donc l'élément qui est à l'intérieur, on va pouvoir faire à peu près la même chose, c'est-à-dire définir une largeur, par exemple ici de 200 pixels, une hauteur de 200 pixels, pareillement, et puis on va placer bien sûr, une couleur d'écriture et une couleur d'arrière-plan. Si j'actualise tout ça, on voit bien que nos conteneurs et nos contenus sont placés à l'intérieur. Sauf que le contenu d'ici, lui, forcément, il flotte derrière le mot conteneur, il va se positionner derrière, il n'y a pas de raison qu'il passe au-dessus. Maintenant, si on dit : « écoutez, je vais mettre une marge à ce conteneur.» Et je vais mettre une marge de 200 pixels. J'enregistre. Tout ce petit monde bouge, bien entendu. C'est normal : le contenu est parti avec le conteneur. Alors je vais dire que mon contenu, maintenant, je voudrais qu'il ait une position qui soit absolute. Position. Absolute. Et on va revoir cette position absolute, je vais lui dire qu'il aura un top à 0, et un left à 0. Pourquoi ? Parce que je souhaite qu'il ait une position absolue sur l'élément, donc il vient à 0. Alors je vais enlever la marge, pour être encore un poil plus tordu. J'enlève la marge. Control+S. J'actualise. Donc on a bien notre élément qui est passé à (0;0), il s'est bien calé sur ce (0;0) : c'est parfait. C'est un peu ce que je souhaitais obtenir. Sauf que si maintenant, je remets ma marge, là, ici. D'après vous, où va aller le contenu ? Regardez. J'ai remis ma marge. Ah ! Et je me suis trompé. Je croyais avoir copié. Je mets la margin à 200 pixels. Ctrl+S. Ici, j'actualise, regardez. Le conteneur il est passé ici. Mais le contenu est resté à (0;0). Parce qu'en fait souvent on pense que la position absolute c'est basé sur le body. Et que donc, forcément, il s'est placé sur le body, et que le (0;0) passe sur le (0;0) du body. En fait, non, la position absolue se base sur le premier parent positionné. Qui c'est mon premier parent ? Mon premier parent, c'est le conteneur. Mon conteneur est positionné ? Non, pas du tout. Si maintenant je mets une position. Qu'est-ce que je pourrais mettre comme position explicite à mon élément ? Je pourrais mettre un statique, le problème c'est que ça fonctionnera pas, parce que statique va retourner dans le flux tel qu'il est. Donc je vais le positionner relativement à lui-même. Sauf que je ne le décalerai ni de zéro, ni de dix, ni de rien, je le laisse en position relative, point barre. Donc je viens explicitement de le positionner. Et à ce moment-là, mon contenu se positionne par rapport à son premier parent positionné, qui est le conteneur, et qui vient donc se recaler à (0;0) du conteneur, puisque celui-ci est déclaré positionné. Donc on a pu voir au travers de ces quatre exemples le positionnement relatif, le positionnement fixe et le positionnement absolu. Avec, celui qu'on n'a pas vu c'est le statique qui permet de réinitialiser les éléments sur eux-mêmes. Ce que je veux dire, c'est repositionner sur eux-mêmes tels que le navigateur les a affiché dans son flux. Donc en gros, on re-rend la main au navigateur pour afficher l'élément. Donc le positionnement est aussi une possibilité assez fréquente en CSS pour pouvoir justement aller dispatcher certaines parties d'éléments. Cette étape sur le positionnement est maintenant terminée et le chapitre également.

L'essentiel des CSS

​Explorez et assimilez les outils de base des CSS pour en comprendre les interactions visuelles. Structurez et gérez ainsi l’apparence et le visuel de vos sites web.

5h09 (54 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Thématiques :
Design web
Standards du web
Spécial abonnés
Date de parution :28 avr. 2016

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !