Lesson: lesson-css-zindex-2

Stacked DIV element.

Demo code taken from https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float

The all outputs (see positioning of DIV #1) are correct. Vivliostyle supports as only converter opacity and stacks the DIV elements in the same way as browser engines do. PDFreactor, Antennahouse and PrinceXML do not support opacity and stack the DIV elements according to the rules...so the rendering of all converters here is at some point correct and consistent.

PDF files

Converter PDF Preview
PDFreactor
(OK)
Download
no opacity support -> different stacking order
PrinceXML
(OK)
Download
no opacity support -> different stacking order
Antennahouse
(OK)
Download
no opacity support -> different stacking order
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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
@import url("../styles/a4-landscape.css");

span.bold { font-weight: bold; }

#absdiv1 {
    opacity: 0.7;
    position: absolute;
    width: 150px;
    height: 200px;
    top: 10px;
    right: 140px;
    border: 1px dashed #990000;
    background-color: #ffdddd;
    text-align: center;
}

#normdiv {
    /* opacity: 0.7; */
    height: 100px;
    border: 1px dashed #999966;
    background-color: #ffffcc;
    margin: 0px 10px 0px 10px;
    text-align: left;
}

#flodiv1 {
    opacity: 0.7;
    margin: 0px 10px 0px 20px;
    float: left;
    width: 150px;
    height: 200px;
    border: 1px dashed #009900;
    background-color: #ccffcc;
    text-align: center;
}

#flodiv2 {
    opacity: 0.7;
    margin: 0px 20px 0px 10px;
    float: right;
    width: 150px;
    height: 200px;
    border: 1px dashed #009900;
    background-color: #ccffcc;
    text-align: center;
}

#absdiv2 {
    opacity: 0.7;
    position: absolute;
    width: 150px;
    height: 100px;
    top: 130px;
    left: 100px;
    border: 1px dashed #990000;
    background-color: #ffdddd;
    text-align: center;
}

HTML input

 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
33
34
35
36
<html>
<head>
    <link rel="stylesheet" type="text/css" href="styles.css"/>
</head>

<body>
    <br /><br />

    <div id="absdiv1">
        <br /><span class="bold">DIV #1</span>
        <br />position: absolute;
    </div>

    <div id="flodiv1">
        <br /><span class="bold">DIV #2</span>
        <br />float: left;
    </div>

    <div id="flodiv2">
        <br /><span class="bold">DIV #3</span>
        <br />float: right;
    </div>

    <br />

    <div id="normdiv">
        <br /><span class="bold">DIV #4</span>
        <br />no positioning
    </div>

    <div id="absdiv2">
        <br /><span class="bold">DIV #5</span>
        <br />position: absolute;
    </div>
</body>
</html>