z-index issue in Safari

[random1]

I have an image that is used in the CSS:

 

.flare1

{

/* Top Right */

position:absolute;

z-index:3;

left:350px;

top:-150px;

}

 

The container div for this element has the z-index of '2'.

 

This has a nav menu hovering over this with the z-index of '100'.

 

This works fine in Firefox, Explorer but fails in Safari.

 

Any tips?

[haku]

I would suggest not using absolute positioning unless you know what you are doing. Its an easy fix, but usually ends up causing problems like the one you are having.

 

On that same note, I would suggest avoiding z-indexes as well. If you need something to be above something else, move it further down in your document structure, as lower elements appear above higher elements.