Overlapping Elements: background-color below images

First things first, sorry if my English is flawed, it's no my mother language. I'll try my best to explain this but if you don't understand something about it please feel free to ask.

Now... to the tip: Today I was developing a WordPress theme and I found this weird bug which happens with the background color of overlapped elements.

I have a thumbnail image which must be overlapped by the post header (title and author), the post header background must be semi-transparent white. This is a trivial effect but I just came across this issue. What happens when we place the header element on top of the img element is that the background-color is behind the img and the content on top of it. Really weird!

Here is an example of what I've got:

After overthinking this for a little while, trying a few CSS combinations I found out the solution was quite simple: just add position: relative; to the header element that must overlap the thumbnail and everything works just fine:

Good luck!~