z-index

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
Weasyprint  OK
PagedJS  OK
Typeset.sh  OK
Vivliostyle  OK
BFO  OK
OK OK with issues Error Unsupported

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