CODEWITHSUNDEEP
htmlcss
JellyAce
JellyAce

Reputation: 96

Box-shadow not appearing OVER a div with lower z-index

So guys, I've here a header:

Header with shadow

As you can see, the box-shadow works just fine. However, putting a background-color on the content <div> yields this:

Header with covered shadow

Visually, the box-shadow was covered by the background-color. The content <div> has lower z-index value than the header though. How can I make the box-shadow appear over the <div> to make it seem like the content is under the header?

If this will help, here is the CSS for both markups:

header{ /* the header, obviously */
            background: #fee;
                height: 60px;
               padding: 40px 20px 0px 20px;
         border-bottom: 5px solid #f53301;
    -webkit-box-shadow: 0 12px 16px -6px gray;
       -moz-box-shadow: 0 12px 16px -6px gray;
            box-shadow: 0 12px 16px -6px gray;
         border-radius: 20px 20px 0px 0px;
               z-index: 9999;
}

#content-inside { /* the content */
    padding:20px;
    z-index:1; /* changed this to -1 but it still didn't work */
    background:white;
    border:1px solid black;
}

I hope someone can help me with this. Cheers!

Upvotes: 3

Views: 4449

Answers (1)

j08691
j08691

Reputation: 207923

z-index only applies to element where the position has been set (i.e. not the default static position). Trying position:relative would be the most likely solution here.

Upvotes: 6

Related Questions