0

cssを使用して持ち上げられた影の効果をボックスに適用しようとしていますが、負のzインデックスを使用すると、影がボックスの後ろに移動し、ボックスの下部に留まるはずの効果も消えます。行われる。

これが私のコードとそれがどのように見えるべきかです：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内に配置する場合は、「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

于 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 に答える