Lesson: lesson-css-zindex

This example renders three overlapping rectangles. The red rectangle should be drawn with 75% opacity. It partly covers the blue and the green rectangle. The stacking order of the rectangles is defined by their z-index.

PDF files

Converter PDF Preview
PDFreactor
OK
Download
PrinceXML
OK
Download
Antennahouse
OK
Download
Vivliostyle
OK
Download

Stylesheet

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
@import url("../styles/a4.css");

.box  {
    width: 8cm;
    height: 8cm;
    border: 1px solid blue;
}


#box-1 {
    background-color: blue;
    position: absolute;
    left: 2cm;
    top: 2cm;
    z-index: 0;
}

#box-2 {
    background-color: rgba(255, 0, 0, 0.75);
    position: absolute;
    left: 4cm;
    top: 4cm;
    z-index: 100;
}

#box-3 {
    background-color: green;
    position: absolute;
    left: 6cm;
    top: 6cm;
    z-index: -100;
}

HTML input

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="styles.css" />
    </head>
    <body>
        <div class="box" id="box-1"></div>
        <div class="box" id="box-2"></div>
        <div class="box" id="box-3"></div>
    </body>
</html>