Given the following HTML:

```
<div class="foo">howdy howdy howdy how</div>
<div class="bar">Hello</div>​

```

and the following CSS:

```
.foo {
    background-color:green;
    overflow:hidden;
    height:.75em;
}

.bar {
    color: white;
    background-color: red;
    margin-top: -10px;
    width: 200px;
}

```

The layer order is something like this: 

![weird layer order](https://i.stack.imgur.com/ATnO7.png)

Here's the associated jsfiddle: <http://jsfiddle.net/q3J8D/>

I would expect the red background to be on top of the black text and don't understand why the black text is on top of the red background.

I can fix this problem using `position: relative`, but I'm just curious.

**Why is the black text on top of the red background?**

I'm particularly looking for an official source/standard that explains this behaviour.