why is css white background for this div not actually white but transparent?

http://jsfiddle.net/QjF4d/

I have a div.rating_bar which is superimposed on over a div.artist. The .rating bar has a background color of white but it doesn't display as white, instead 开发者_StackOverflow中文版it's just transparent. How come?

Edit: z-index of elements defined lower in the source code are greater than that of elements defined higher in the source. Once I moved the .rating bar lower in the source, I could see the white background as it was now sitting on top of the semi-transparent div, rather than under it.

I don't see any z-index in your css, so I don't know why you presume who is on top of what. In short, white is white, it's just that rating_bar div ended up below artist one.

Try giving the div.rating_bar a higher z-index then the div.artist - The :hover boxes will need higher z-index then div.rating_bar