Opacity influencing the z-index with floats

Question

After trying to figure out what's wrong with my floated images, I noticed that opacity seems to have a strange bug:

http://jsfiddle.net/tshwbnLo/

If you have an element with opacity, it just draws "over" the floated image, instead of going with the expected behaviour. Since I used headers that have a border-bottom those borders were always drawn over the floating image.

Using positon: relative to set the z-index manually isn't going to work, since I still need the floating image to behave like one

Answer 1

The only solution I found so far (if other people run into this) is to use RGBA colors instead of setting an overall opacity, ie:

color: rgba(?, ?, ?, opacity)
border-color: rgba(?, ?, ?, opacity)
background-color: rgba(?, ?, ?, opacity)

But is there an easier / cleaner way? It seems more like a dirty hack than a real solution, just to achieve exactly the same result! (except for the weird z-index).

I was wrong, position: relative; z-index: 2 我错了， position: relative; z-index: 2 position: relative; z-index: 2 actually works even with float . I'm still curious about better solutions though, I think this should just work out of the box after all.