Is it possible to place the absolute-positioned `#element` behind the relative-positioned `#container` ID, if the former is a child of the latter ? 

In other words, how can I get the red element to be positioned **between** the blue element and the yellow element??

`z-index` doesn't seem to work. 

[**Example**](http://jsfiddle.net/s9godfn1/) 

**HTML**:

```
<div id="big_container">
    <div id="container">
        <div id="element"></div>
    </div>
</div>

```

**CSS**:

```
#big_container {
    width:100%;
    height:100%;
    background:yellow;
}
#container, #element {
    height:50px;
    width:50px;
}

#container {
    position:relative;
    z-index:5;
    background:blue;
}

#element {
    position:absolute;
    z-index:10;
    background:red;
    top:5px;
    left:5px;
}

```

**Updated**.