Home/ Questions/Q 8483599
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T20:08:59+00:00

I’m using a css drop shadow technique found here: http://nicolasgallagher.com/css-drop-shadows-without-images/demo/ It uses the psuedo

  • 0

I’m using a css drop shadow technique found here:

http://nicolasgallagher.com/css-drop-shadows-without-images/demo/

It uses the psuedo classes, before and after, to give more shape to your shadows. The problem is that I can’t get the shadow to display over other elements.

Here is jsfiddle: http://jsfiddle.net/S7dzj/6/

I have tried various relative positioning of the div’s with different z-indexes.
I have also tried to move the header element within the top div, no help.
I have also tried moving the top div relatively top: -5px to make it go underneath the header div but still no shadow.

Is there a way to accomplish this?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    1. The z-index property only applies to elements which are not position: static, so your .top class was merely ignoring that property.

    2. Your .header and .top classes both had the same z-index, so the header was appearing on top.

    See the updated jsFiddle. All I did was add position: relative (which doesn’t visually do anything on its own) to .top and change it’s z-index to -2.

    • 0