This page shows you how to use CSS to create multiple layers, and how to use the
position:fixed and “z-index”.
Look at the lower right, there are 2 overlapping boxes, one yellow and one red. Their positions are fixed relative to the window.
Here's the code:
<div style=" position:fixed; z-index:6; bottom:10ex; right:10ex; "> <p style="background-color:yellow">Yellow Box</p> </div>
<div style=" position:fixed; z-index:7; bottom:8ex; right:8ex; "> <p style="background-color:red">Red Box</p> </div>
position:fixed. The yellow has
z-index:6, and red has 7. So, red is in front.
“z-index” can be 0 or negative.
The “z-index” is meaningful only for elements that has one of: