The z-index property defines the element‘s vertical stack order.
With overlapping elements, those with the highest value display in front.
And those with lower values display behind the other elements.
The transparent overlay with text displays in front of the painting because it has a higher z-index.
<style>
.art { position: relative; }
.overlay {
position: absolute;
bottom: 0;
left: 0;
background: rgba(255,255,255,0.8);
padding: 10px;
width: 300px;
text-align: center;
font-weight: bold;
color: #765;
z-index: 100;
}
</style>
<div class="art">
<img src="/img/css/cardplayers.jpg">
<div class="overlay">The Card Players, by Paul Cézanne</div>
</div>
The z-index property only works on positioned elements -- except for static.
So, elements that participate in the standard page flow are not stackable.
The positioned element with the highest z-index will display in front.
The positioned element with the lowest z-index will display behind the others.
The default value is 0. A value of -1 displays behind all elements without a z-index.
z-index: auto | number | initial | inherit;
| Value | Description |
|---|---|
auto |
Default. Inherit parent's z-index value. |
number |
Sets the z-index of the element. Default is 0. Accepts negative values. |
initial |
Sets the z-index to its default value. |
inherit |
Inherit parent's z-index value. |
This table shows when z-index support started for each browser.
 Chrome
|
1.0 | Dec 2008 |
 Firefox
|
3.0 | Jun 2008 |
 IE/Edge
|
4.0 | Sep 1997 |
 Opera
|
4.0 | Jun 2000 |
 Safari
|
1.0 | Jun 2003 |
