-1

I want to use box-shadow everywhere except from the top on this example:

http://jsfiddle.net/KquxS/2/

I'm pretty sure it can be done with z-values but I'm not sure how, as you can see I've had a little play trying but no luck.

Kryptix
  • 129
  • 1
  • 6
  • What do you mean by you don't want to use shadows "from the top on" ? – John Stimac Jun 02 '12 at 15:25
  • I don't understand your question, but a z-index only works if you use it together with `position: absolute`, or `position: relative`. So in your example the z-index are not read at all... – Neograph734 Jun 02 '12 at 15:40
  • Sorry, if you hover over the 'Register' link you should see the shadow appears around the whole menu. I only want it to show on the left, bottom and right (not the top). – Kryptix Jun 02 '12 at 15:46
  • have a look here then ;) http://stackoverflow.com/questions/1429605/creating-a-css3-box-shadow-on-all-sides-but-one – Neograph734 Jun 02 '12 at 15:48
  • Here's a better example: http://jsfiddle.net/KquxS/9/ – Kryptix Jun 02 '12 at 15:57

2 Answers2

0

I wouldn't recommend using z-index.

Consider using the following style:

ul:not(:first-child) {
    box-shadow:0 0 40px black;
}

I'm gonna leave this but I think the comment you just posted helped clarify what you're looking for.

Andrew
  • 3,733
  • 1
  • 35
  • 36
  • Could you edit the jsFiddle to show what you mean as I don't think that's what I'm after? – Kryptix Jun 02 '12 at 15:58
  • I thought you didn't want the box shadow to appear on the top 2 lists. I didn't realize you were talking about the edges of the lists. – Andrew Jun 02 '12 at 16:07
0

If you use position: absolute, you have to provide the position (top, left, etc) as well. Otherwise position and z-index have no effect and the elements will be drawn in the order they appear in the DOM.

See http://www.w3.org/wiki/CSS/Properties/z-index

Felix Kling
  • 795,719
  • 175
  • 1,089
  • 1,143