Grow your CSS skills. Land your dream job.

What is wrong with this box-shadow in my live project?

  • # June 4, 2013 at 7:06 am

    I did [this](http://codepen.io/alex13/pen/lLwKI “”) separately and it worked.
    But when I used same code in a live [website](http://www.ctrlshiftstudios.com/ChurchSite/contact.php “”) am doing, it will not show.
    What is wrong? I want the two white divs before footer to have the same drop shadow in the codepen above.

    # June 4, 2013 at 7:23 am

    From the looks of it, it’s a z-index issue.

    @HugoGiraudel, how’s understanding z-index going, need some practice? ;)

    # June 4, 2013 at 7:25 am

    >From the looks of it, it’s a z-index issue.

    Yeah…the shadows are there as you can see by turning off the `z-index:-1`.

    # June 4, 2013 at 7:32 am

    yes. but the one of codepen has a z-index of -1.

    # June 4, 2013 at 7:33 am

    >yes. but the one of codepen has a z-index of -1.

    But that’s in isolation….a lot of other elements are involved in a live web page and they all have a z-index.

    # June 4, 2013 at 7:34 am

    > @HugoGiraudel, how’s understanding z-index going, need some practice? ;)

    Not so much. Don’t have enough time to work on this. :D

    # June 4, 2013 at 7:38 am

    Try setting the `z-index` on the section (.clientSection) to 0. The shadows will appear but you will have to change the color to get them to look right.

    # June 4, 2013 at 7:42 am

    @Paulie_D, woow. It worked. But come to think of it. The. clientSection was never positioned relative or absolute or fixed. I thought only these 3 positioning can have z-index by default. Does static position have z-index too. Thank u.

    # June 4, 2013 at 7:50 am

    Z-index only takes **effect** when positioning is set but it still accumulates (I think).

    All I suggested was, in effect, re-setting the…erm…index.

    # June 4, 2013 at 7:55 am

    > I thought only these 3 positioning can have z-index by default. Does static position have z-index too.

    One of these 3 types of positioning is required for a z-index value to be interpreted by the browser. All elements on the page have a default z-index value of auto which equals 0. So, no stacking context, except for the root element which has a different behaviour.

    # June 4, 2013 at 7:56 am

    Thank u. [Here](http://www.ctrlshiftstudios.com/ChurchSite/contact.php “”)

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".