Amazon Deal Widget Help

So, on my website i have a fixed navigation at the top...i also have the Amazon Deal Widget further down within a Div.. when scrolling down however, the Amazon Deal Widget appears in front of my navigation..

I have the navigation placed infront of everything else on the page by using 'z-index' & i have tried to z-index the div in which my Amazon deal widget is placed.. but no joy..

Does anyone know how i can have these widgets appear behind my navigation when scrolling up and down the page?
or
Has anyone experienced this before?

it just looks sloppy as they appear in front of the navigation as the user scrolls up & down lol

Sorry if i have worded any of this wrong

I believe z-index has to be used together with the position element. Are you using the position element in both your widget div and the navigation div?

The div containing the Widget ..


I have tried with no z-index, all kinds of z-index numbers but no joy..

It's the widget not the div what's the problem

This is part of the Navigation..


The Navigation works & looks fine with the rest of my website, including the astore..it's just those damn widgets appear in front of it when you scroll down the page.. i could just have a normal navigation lol, but i like the look & feel of a fixed nav (like twitter, facebook etc..)

Thanks

It is hard to help without seeing a live example of your problem.
If you could bring us your site url or better a jsfiddle.net sample, its would be great I think.

#over is positionning relative to which element? What is position property of this parent element?
Z-index work with associate position.
You should play with all position. {static relative absolute fixed inherit}
For example, try position:static in place of :relative.

Float property can override some others properties I think.

Other thing, is it the same result in all browsers?