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.

Repository files

PDF files

Converter Status PDF Preview
PDFreactor  OK
PrinceXML  OK
Antennahouse  OK

HTML input

<!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>

Stylesheet

@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;
}