For that purpose, you can assign each element a number (
z-index
). The system is that an element with a higher number overlaps an element with a lower number.Let us say we are playing poker and have a royal flush. Our hand can be presented in a way where each card has got a
z-index
:In this case, the numbers follow on another (1-5) but the same result can be obtained by using 5 different numbers. The important thing is the chronological sequence of the numbers (the order).
The code in the card example could look like this:
show example
The method is relatively simple but the possibilities are several. You can place images on text or text above text etc.
Summary
Layers can be used in many situations. For example, try to usez-index
to create effects in headlines instead of creating these as graphics.
For one thing, it is faster to load text and for another, it provides a
potentially better ranking in search engines.