Question

I’m currently working on a site that uses the “page lift” effect with CSS3 (see demo items 2-4 here), and for my first page, it worked well.

However, I’m now trying to add it to an element that has a background color (the working ones have elements inside the .lift element, which makes the shadow sit beneath everything in the stacking context), but on the non-working element, the z-indexing seems to be having issues. It will go to one extreme (the shadows sits on top of the background; z-index:1 on .lift element) or the other (the shadow sits below not just the element it’s :after, but below that element’s parent; no z-index on .lift element).

Here’s a demonstration of the issue I’m running into, with some notes. The shadow should be under the white box, but on top of the blue one. Is there a way to fix this, so that the shadow in the proper location, without moving the background to the .lift element’s child(ren) or adding an extraneous wrapper around the .lift element?

Here’s the code:

<div class="main">
    <div class="lift"></div>
</div>

.main {
    background: #00f;
    height: 151px;
    width: 400px;
}
.lift {
    position: relative;
    z-index: 1;
    margin-bottom: 10px;
    height: 150px;
    width: 200px;
    background: #fff;
}
.lift:after {
    content:'';
    position: absolute;
    z-index: -2;
    width: 75%;
    max-width: 300px;
    height: 15%;
    bottom: 24px;
    right: 10px;
    -webkit-box-shadow: 0 20px 10px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 20px 10px rgba(0, 0, 0, 0.5);
    box-shadow: 0 20px 10px rgba(0, 0, 0, 0.5);
    -webkit-transform: rotateZ(3deg) skewX(10deg);
    -moz-transform: rotateZ(3deg) skewX(10deg);
    -ms-transform: rotateZ(3deg) skewX(10deg);
    -o-transform: rotateZ(3deg) skewX(10deg);
    transform: rotateZ(3deg) skewX(10deg);
}

Answer 1

It’s the z-index of your #main .. overpassing your .lift:after

.main {
    background-color: #00f;
    height: 300px;
    width: 400px;
    margin-bottom: 20px;
    padding:20px;
    position:relative;
    z-index:-3;
}

I suggest you do not use negative values for z-index.

carry on