• 10 heures
  • Facile

Ce cours est visible gratuitement en ligne.

course.header.alt.is_video

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 13/03/2023

Stack elements in an order

When you start positioning elements in an inflexible way, like by using absolute, relative, or fixed positioning, you may need to also control the stacking order of elements.

Stacking elements also comes up with modern ways of setting layouts. It's a less legacy concept than floats or positioning, so pay attention! You may actually need this.

Consider when you're using PowerPoint, Keynote, Sketch or other software that allows you to "Send to back", "Send to back", "Forward", etc, in order to make something appear in front of or behind something else:

The
The "Forward" and "Backward" buttons in Sketch, similar to Powerpoint, etc

If you're working with a layout that was set in a legacy way, you may end up with overlapping elements. You saw elements that were accidentally overlapped in the positioning chapter, but you may want to do this on purpose too!

The CSS property  z-index  will allow you to stack overlapping elements in the order of your choice. Simply give it a numerical value. The numbers you give will determine the stacking order. If you give one element a  z-index  of 1 and another a  z-index  of 2, the second element will appear in front of the first (the higher the value, the more "forward" it will be).

Let's take an example of three simple square cards. Right now, they appear in the same order as they appear in the HTML: from 1 to 3, where 3 is the last one (and therefore appears on top). This is the default behavior with no custom  z-index  value applied:

Stacked divs with no custom z-index
Stacked divs with no custom z-index

HTML

<div id="card1">1</div>
<div id="card2">2</div>
<div id="card3">3</div>

CSS

* {
font-family: Futura;
color: white;
font-size: 1.2em;
text-align: center;
}
#card1, #card2, #card3 {
width: 200px;
height: 200px;
}
#card1 {
position: absolute;
top: 20px;
left: 20px;
background-color: #9bccdd;
}
#card2 {
position: absolute;
top: 60px;
left: 60px;
background-color: #58badd;
}
#card3 {
position: absolute;
top: 100px;
left: 100px;
background-color: #00a1e0;
}

In order to make card number 1 appear above the others, you can assign each card a z-index, where card 1's z-index is the highest. We'll set:

  • card 1's  z-index  to 3

  • card 2's  z-index  to 2

  • card 3's  z-index  to 1

#card1 {
z-index: 3;
}
#card2 {
z-index: 2;
}
#card3 {
z-index: 1;
}
Cards with z-index values that stack in reverse order
Cards with z-index values that visually stack in reverse order

In reality, you could even set these silly values:

  • card 1's  z-index  to 5000

  • card 2's  z-index  to 342

  • card 3's  z-index  to 6

The result would be the same. All that matters is how the numbers relate to one another; they don't actually have to be in order, although that does keep your code logical and easier to read!

Recap

  • The propertyz-index allows you to stack overlapping elements in the order of your choice.

  • The highest  z-index  value will be visible at the top of the stack. 

Et si vous obteniez un diplôme OpenClassrooms ?
  • Formations jusqu’à 100 % financées
  • Date de début flexible
  • Projets professionnalisants
  • Mentorat individuel
Trouvez la formation et le financement faits pour vous
Exemple de certificat de réussite
Exemple de certificat de réussite