Css box shadow lifted corner

Question

I am trying to apply the lifted shadow effect with css to a box but when I use the negative z-index the shadow goes behind the box and the effect that should stay at the bottom of the box disappears too instead of staying for the effect to take place.

Here is my code and how it should look: http://jsfiddle.net/K7tSy/4/

.boxz:before {
      z-index: 1; 
      position: absolute; 
      content: "";
      bottom: 8px;
      left: 28px;
      width: 90%; 
      top: 80%;
      max-width:300px;
      background: rgba(0, 0, 0, 0.7); 
     -webkit-box-shadow: 0 15px 10px rgba(0,0,0, 0.7); 
        -moz-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
             box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
      -webkit-transform: rotate(3deg); 
         -moz-transform: rotate(-3deg); 
           -o-transform: rotate(-3deg);
          -ms-transform: rotate(-3deg);
              transform: rotate(2deg);
   }

And this is the test site http://www.codita.ro/asd/ notice if I set the z-index to negative the effect disappears instead of showing up like on the fiddle. Can someone explain whats preventing it from displaying like on in the fiddle when I set the negative z-index?

Answer 1

Your element is a child of a container that doesn't have a z-index stacking context. If you are putting it within a div for a background color, style the div with a "position: relative" and z-index = 1 to set a stacking context within the container.

Ref:

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context?redirectlocale=en-US&redirectslug=CSS%2FUnderstanding_z-index%2FThe_stacking_context

Answer 2

Remove content : "" from class .boxz:before.

Hope this will give you result as you want.

I have tested in your http://www.codita.ro/asd/

OP

Add background-color:#FFFFFF in your wrapall class.