CSS: negative z-index

In CSS, the z-index property controls the layering order when elements overlap due to positioning. This property accepts both negative and positive values. An element with a greater z-index value will be nearer to the user's eye than an element with a lower value. This turns out to be very useful when elements have some active content (such as links) that needs to be clickable by the user. In fact, if you don't use this property correctly, some of your content might be left inactive by browsers. But what happens when an element has a negative z-index value? This is interesting. For example, given an initial situation like this:

#container {
    width: 400px;
    height: 300px;
    position: relative;
    background: #cecece;
    border: medium solid silver;
}

#one {
    position: absolute;
    width: 150px;
    height: 2em;
    top: 1em;
    left: 2em;
    background: orange;
    z-index: 1;
}

#two {
    position: absolute;
    width: 100px;
    height: 2em;
    top: 1em;
    left: 4em;
    background: fuchsia;
    z-index: 2;
}

#three {
   position: absolute;
   width: 90px;
   height: 2em;
   top: 1em;
   left: 5em;
   background: yellow;
   z-index: 3;
}

you got this result:

Nothing unusual, as you can see. Now let's try to use a negative value on the first element, like so:

#one {
    position: absolute;
    width: 150px;
    height: 2em;
    top: 1em;
    left: 2em;
    background: orange;
    z-index: -1;
}

You got this result instead:

Simply put, a negative value results in the element to be hidden from view. I didn't test this in Internet Explorer, so any comment in that sense would be really appreciated.