0

我正在尝试将带有 css 的提升阴影效果应用于一个盒子，但是当我使用负 z-index 时，阴影会出现在盒子后面，并且应该留在盒子底部的效果也会消失，而不是停留在效果上发生。

这是我的代码及其外观：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);
   }

这是测试站点http://www.codita.ro/asd/ 请 注意，如果我将 z-index 设置为负数，效果就会消失，而不是像小提琴一样出现。当我设置负 z-index 时，有人可以解释是什么阻止它在小提琴中显示吗？

4

2 回答 2

2

您的元素是没有 z-index 堆叠上下文的容器的子元素。如果您将它放在 div 中作为背景颜色，请使用“位置：相对”和 z-index = 1 设置 div 的样式以在容器内设置堆叠上下文。

参考：

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

于 2013-07-12T04:32:53.957 回答
1

content : ""从类中删除.boxz:before。

希望这会给你想要的结果。

我已经在您的http://www.codita.ro/asd/中进行了测试

OP

加入background-color:#FFFFFF你的wrapall班级。

于 2013-03-26T09:46:37.127 回答