Question

我正在尝试将带有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时，有人可以解释什么阻止它在小提琴中显示？

Answer 1

您的元素是没有z-index堆叠上下文的容器的子元素。如果要将其放在div中作为背景颜色，请使用“position：relative”和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

Answer 2

从班级content : ""移除.boxz:before。

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

我已在您的http://www.codita.ro/asd/

中进行了测试

<强> OP

在background-color:#FFFFFF课程中添加wrapall。

Css框影抬起角落

2 个答案: