Transformez vos éléments avec display
La propriété CSS display
permet de transformer n'importe quel élément de votre page, d'un type vers un autre. Avec cette propriété, on peut par exemple imposer à des liens (originellement de type inline
) d'apparaître sous forme de type block
:
a {
display: block;
}
À ce moment-là, les liens vont se positionner les uns en dessous des autres (comme des blocs normaux), et il devient possible de modifier leurs dimensions ! Et à l'inverse, vous pouvez tenter de faire en sorte qu'un élément qui est de type block
par défaut devienne inline
.
Cachez vos éléments avec display: none;
On peut également décider de masquer complètement un élément de la page en attribuant à display la valeur none. Par exemple, si je veux masquer les éléments qui ont la classe secret, je vais écrire :
.secret {
display: none;
}
none est très pratique lorsqu'il faut cacher certains éléments en fonction de la taille de l'écran.
La liste des différentes valeurs possibles pour display
est longue. Nous n'aurons pas le temps de toutes les aborder ensemble ici, mais sachez qu'il est notamment possible de tirer parti du meilleur de inline
et block
. Pour cela, vous pouvez utiliser display: inline-block;
qui rend vos éléments inline
tout en permettant de les dimensionner.
Positionnez vos éléments avec la propriété CSS position
Dans les méthodes que nous avons vues jusqu'à maintenant, le navigateur dispose les éléments afin qu'ils ne se superposent jamais. Ils font partie d'un flux normal. Mais nous allons maintenant voir une nouvelle propriété :position
. Elle permet de positionner avec précision des éléments sur la page (et même parfois de les superposer).
Le positionnement relatif permet de décaler l'élément par rapport à sa position normale.
Le positionnement absolu permet de placer un élément n'importe où sur la page (en haut à gauche, en bas à droite, tout au centre, etc.).
D'autres types de positionnements comme
fixed
ou encoresticky
, qui ont des comportements assez semblables, peuvent être utiles si l'on veut qu'un élément, tel que le menu de navigation par exemple, reste à l'écran.
Le positionnement fonctionne aussi bien sur des balises qui sont inline
que block
. Mais dans les faits, vous verrez qu'on l'utilise bien plus souvent sur des balises block
que sur des balises inline
.
Il faut d'abord faire son choix entre les trois modes de positionnement disponibles. Pour cela, on utilise la propriété CSS position
.
Regardons tout ça d'un peu plus près !
Définissez un positionnement relatif avec position: relative;
Le positionnement relatif permet d'effectuer des ajustements : l'élément est décalé par rapport à sa position initiale.
Prenons par exemple un texte dans lequel se trouve un lien. Pour commencer, on donne une couleur de fond au body, et on met le lien sur un fond blanc.
Ici, on utilise position: relative;
. Notre élément a alors un point d'origine : le point de coordonnées (0, 0)
qui va nous permettre de le déplacer :
On accède alors à quatre propriétés CSS qui vont nous permettre de décaler notre élément :
left
: décalage depuis la gauche.right
: décalage depuis la droite.top
: décalage depuis le haut de notre élément.bottom
: décalage depuis le bas de notre élément.
Ainsi, si j'écris le CSS suivant :
a {
background-color: white;
position: relative;
top: 6px;
left: 10px;
}
Regardez ce que ça donne :
Définissez un positionnement absolu avec position: absolute;
Le positionnement absolu permet de placer un élément (réellement) n'importe où sur la page. Pour l'utiliser, on écrit tout simplement position: absolute;
:
a {
background-color: white;
position: absolute;
top: 6px;
left: 10px;
}
Regardez ce que ça donne :
Prenons un autre exemple maintenant, et regardez le résultat du CodePen P3C5c.
Bon c'est bien beau, mais cela ne suffit pas pour positionner un élément où on souhaite vraiment. Pour y parvenir, on va refaire appel à nos left
, right
, top
et bottom
.
On pourra leur donner une valeur en pixels, comme 14px
ou une valeur en pourcentage, comme 50%
.
Habituellement, les éléments inline
et block
sont disposés dans le flux normal. Mais ici, vous voyez, nos éléments ne respectent plus rien, et sortent du flux.
Donc quand j'utilise left
, right
, top
et bottom
, mon élément va toujours se placer par rapport aux bords de la page ?
Eh bien… pas nécessairement. Un élément absolute
va se positionner par rapport au premier élément qu'il rencontre dans ses parents, et qui utilise lui-même la propriété position
. Donc si on veut placer un élément par-dessus un autre, il faudra que ce premier élément utilise aussi la propriété position
.
Regardez un peu ce que cela donne :
Gérez le chevauchement avec la propriété z-index
Vous l'avez remarqué, les éléments positionnés en absolu sont placés par-dessus le reste des éléments de la page. Mais si vous placez deux éléments en absolu aux mêmes coordonnées… ils vont se chevaucher.
Dans ce cas, vous pouvez utiliser la propriété z-index
pour indiquer quel élément doit apparaître au-dessus des autres : vous empilez vos éléments dans l'ordre souhaité ! L'élément ayant la valeur de z-index
la plus élevée sera placé par-dessus les autres.
Si j'écris le HTML :
<div class="conteneur">
<div class="box une">Élément 1</div>
<div class="box deux">Élément 2</div>
<div class="box trois">Élément 3</div>
<div>
…associé au CSS suivant :
.conteneur {
position: relative;
height: 300px;
width: 300px;
}
.une {
background-color: #C2B0F9;
position: absolute;
left: 0;
top: 90px;
}
.deux {
background-color: #CBFCB9;
position: absolute;
right: 70px;
top: 0;
}
.trois {
background-color: #F2A3BB;
position: absolute;
right: 0;
bottom: 20px;
}
…on obtient :
Bloquez un élément avec fixed
ou sticky
Le principe est exactement le même que pour le positionnement absolu sauf que, cette fois, le bloc se fige, même si on descend plus bas dans la page. Pour faire cela, il y a deux options possibles : attribuer la valeur fixed
ou sticky
à la propriété CSS position
.
Rendez un élément fixe avec position: fixed;
En HTML, on écrit :
<div class="box fixed">Élément fixed</div>
et en CSS, on écrit :
element {
position: fixed;
right: 0;
top: 0;
}
Vous voyez, avec la valeur fixed
, l'élément fixe ne bouge pas.
Rendez un élément adhérent avec position: sticky;
avec <div class="box sticky">Élément sticky</div>
element {
position: sticky;
top: 0;
}
Et c'est la même chose pour la valeur sticky
: l'élément ne bouge pas
Attendez mais fixed
et sticky
exactement le même résultat ? Je ne comprends pas la différence entre un élément fixe et un élément adhérent… Qu'est-ce que ça change ?
À vous de jouer !
Vous allez maintenant pouvoir exploiter ce que vous venez d'apprendre dans le portfolio de Robbie Lens. Les images de la page "Portfolio" peuvent maintenant s'afficher en plein écran avec la méthode vue dans le chapitre “Insérez des images”. Pour cela, des liens ont été ajoutés avec la classe lien-conteneur-photo
.
Pour ce chapitre, vous allez :
transformer les liens qui ont la classe
.cta
en élémentsinline-block
avecdisplay
sur les pages "Accueil" et "À propos", et ajouter leur lien vers la page "Portfolio" ; (cta veut dire call to action en anglais, autrement dit, en français : "bouton d'appel à l'action") ;ajouter des
margin
etpadding
là où il en manque sur les pages "Accueil" et "À propos" (pour rappel, voici la maquette d’inspiration pour le site) ;créer sur les images un effet au survol de la souris en affichant un élément (grâce à
display
) qui :aura un fond noir d’une opacité de
70%
;s’affichera par-dessus l’image, et y mentionnera le texte suivant : “Voir la photo”, comme ceci :
En résumé
La propriété
display
permet de changer le comportement de base d'un élément :transformer un élément
inline
enblock
;inversement, un élément
block
eninline
;mais aussi de faire un mélange des deux avec
inline-block
.
Le positionnement relatif permet de décaler un bloc par rapport à sa position normale.
Le positionnement absolu permet de placer un élément où l'on souhaite sur la page, au pixel près.
Un élément A positionné en absolu à l'intérieur d'un autre élément B (lui-même positionné en absolu, fixe ou relatif) se positionne par rapport à l'élément B, et non par rapport au coin en haut à gauche de la page.
Lorsque plusieurs éléments s'empilent, il est possible de les ordonner avec
z-index
.