CODEWITHSUNDEEP
cssshadow
Jakebobjo
Jakebobjo

Reputation: 25

Box-shadow layering

Okay, So I was messing with box-shadows when i realized that

https://i.sstatic.net/I3E9E.png (Sorry unable to post image)

The nav bar is being overlapped by the shadow, I have tried to put the content ID higher and lower in the code and it wont go under the nav.. If its not possible can someone help me make shadows on all sides but the top?

The code I'm using for the shadow is below.

box-shadow:0px 0px 15px rgba(0, 0, 0, 0.5);

Link to webpage: Here

Upvotes: 1

Views: 2752

Answers (3)

Nickolas Tuttle
Nickolas Tuttle

Reputation: 208

try using the z-index to move the content box below the header layer...

after your 

box-shadow:0px 0px 15px rgba(0, 0, 0, 0.5);

put 

z-index:2;

And also be sure to add

z-index:1;

to your header css...

Upvotes: 2

Joonas
Joonas

Reputation: 7303

Add this to your css:

#nav {
    position: relative;
    z-index: 1;
}

Upvotes: 4

Samuli Hakoniemi
Samuli Hakoniemi

Reputation: 19049

You can define y-axis to be positive, then it shouldn't overlap with your header:

box-shadow:0px 5px 15px rgba(0,0,0,0.5);

Of course, it's then a bit longer on bottom than on sides, but making the box shadow more subtle (like box-shadow:0px 5px 7px rgba(32,32,32,0.5)) would maybe work better.

Edit: z-index (like Lollero suggested) for #nav is probably better way than this.

Upvotes: 0

Related Questions