<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD>
    <TITLE>Z-order positioning</TITLE>
    <STYLE type="text/css">
        .pile {
            position: absolute;
            left: 2in;
            top: 2in;
            width: 3in;
            height: 3in;
        }
        body {
            font-family: Arial;
        }
    </STYLE>
    <script type="text/javascript" src="../../test.js"></script>
</HEAD>
<BODY>
<P>
    <IMG id="image" class="pile"
         src="../../assets/image.jpg" alt="A butterfly image"
         style="z-index: 1">

<DIV id="text1" class="pile"
     style="z-index: 3">
    This text will overlay the butterfly image.
</DIV>

<DIV id="text2">
    This text will be beneath everything.
</DIV>

<DIV id="text3" class="pile"
     style="z-index: 2">
    This text will underlay text1, but overlay the butterfly image
</DIV>
</BODY>
</HTML>