Z-index problems (FF)

1

I’m trying to create a drop shadow for a div, but i can’t see do get z-index to work correctly

<html>
<head>
    <style type="text/css">
    div.shadow {
        background: rgba(0,0,0,0.5);
        position: absolute;
        top: 5px;
        left: 5px;
        height: 100%;
        width: 100%;
        z-index: 1;
    }
    </style>
</head>
<body>
    <div style="background: blue;position: relative; z-index:2">
        TEXT HERE
        <div class="shadow"></div>
    </div>
</body>
</html>

I’ve tried all kinds of things, but no use.
Tried negative numbers, huge numbers.

Using a negative z-index on the shadow works, but i’m using it inside another div on my page, so i need a non-negative way(it just hides the shadow)…