Position:relative hides floats in Firefox

Probably one of the weirdest CSS things in Firefox is that something with position:relative will go over a float placed next to it. It does not happen if the position is static. It is hard to detect, but it can effectively disable all your links in a floated container, as they become hidden under a transparent P or DIV. The situation is the same in Chrome, but not in IE8.

Here is a little test: the red DIV is floated and includes a large link. The blue DIV has position:relative.


a
a
a


The link is only accessible below or above the blue container. I've found no other way of fixing this than to give position:static to elements next to the float.

Popular Posts