WordpressのZ-インデックス問題

Question

これは私が私が私のワードプレスのテーマが、動作していないのページでこれを試してみましたCSS effect

が欲しい効果です。ここにそのケースです： 私はzのインデックスを解除すると、影付きの回転ボックスバーは、領域の正面に来るが、私はそれをシャドウ上に戻すと、回転バーが消えてしまった。このエフェクトの背後にあるシナリオでは、シャドウのみを表示しながら背景領域の背後に回転バーが隠れています。このための任意のソリューションをしてください？ここで コードです：

HTML

<div class="box effect1"> 
<h3>Effect 1</h3> 

CSS

 .box h3 
     { 
     text-align:center; 
     position:relative; 
     top:80px; 
     } 

    .box 
     { 
     width:70%; 
     height:200px; 
     background:#FFF; 
     margin:40px auto; 
     } 

    .effect2 
     { 
     position: relative; 
     } 

    .effect2:before, .effect2:after 
     { 
     z-index: -1; 
     position: absolute; 
     content: ""; 
     bottom: 15px; 
     left: 10px; 
     width: 50%; 
     top: 80%; 
     max-width:300px; 
     background: #777; 
     box-shadow: 0 15px 10px #777; 
     transform: rotate(-3deg); 
     } 

    .effect2:after 
     { 
     transform: rotate(3deg); 
     right: 10px; 
     left: auto; 
     } 

Answer 1

あなたのCSSは、 "EFFECT2" を指しますが、あなたのDIVはEFFECT1」のクラスを持っています"

DIVを「effect2」に変更すると、私はあなたが望むスタイリングを見ることができます。