ボックスシャドーが他の要素と重なっていますが、どうすれば修正できますか？

Question

基本的に、HTMLが要素をどのように順序付けするか（最後の要素が他の要素よりも優先順位が高い）のため、私の影は他の要素と重なります。最初の要素でz-indexを使用すると、それが重複しない唯一の要素になりますが、すべての要素に対してどのように行うかわかりません。

これは私が持っているべきである：

この

は私が現在持っているものである（シャドウサイズ違いを無視し、私は私の問題を見ることが目的でそれをやった）

ここに私のコードは次のとおりです。

CSS：

.timer-container { 
    font-size: 0; 
} 
.timer-container .timer { 
    font-size: 16px; 
    width: 110px; 
    height: 170px; 
    display: inline-block; 
    background-color: #ffffff; 
    color: red; 
    margin: 0 5px; 
    -webkit-box-shadow: 0 26px 57px 0 rgba(0, 0, 0, 0.2); 
    -moz-box-shadow: 0 26px 57px 0 rgba(0, 0, 0, 0.2); 
    box-shadow: 0 26px 57px 0 rgba(0, 0, 0, 0.2); 
} 
.timer-container .time { 
    height: 120px; 
    font: 4em serif; 
    border-bottom: 1px solid #bdd9f6; 
    padding: 15px 0 0; 
} 
.timer-container .label { 
    height: 50px; 
    font: 1.125em serif; 
    text-transform: uppercase; 
} 

HTML：

<div class="timer-container"> 
    <div class="timer"> 
     <div class="time"> 
      <span>12</span> 
     </div> 
     <div class="label"> 
      <span>jours</span> 
     </div> 
    </div> 
    <div class="timer"> 
     <div class="time"> 
      <span>17</span> 
     </div> 
     <div class="label"> 
      <span>heures</span> 
     </div> 
    </div> 
    <div class="timer"> 
     <div class="time"> 
      <span>48</span> 
     </div> 
     <div class="label"> 
      <span>minutes</span> 
     </div> 
    </div> 
    <div class="timer"> 
     <div class="time"> 
      <span>05</span> 
     </div> 
     <div class="label"> 
      <span>secondes</span> 
     </div> 
    </div> 

Answer 1

これが道である可能性があります。あなたのタイマーからシャドウボックスを分割するので、z-indexを使用してタイマーの後ろに置くことができます。

.timer-container { 
 
    font-size: 0; 
 
    position: relative; 
 
} 
 

 
.timer-container .timer { 
 
    font-size: 16px; 
 
    width: 110px; 
 
    height: 170px; 
 
    display: inline-block; 
 
    background-color: #ffffff; 
 
    color: red; 
 
    margin: 0 5px; 
 
} 
 

 
.timer-container .time { 
 
    height: 120px; 
 
    font: 4em serif; 
 
    border-bottom: 1px solid #bdd9f6; 
 
    padding: 15px 0 0; 
 
} 
 

 
.timer-container .label { 
 
    height: 50px; 
 
    font: 1.125em serif; 
 
    text-transform: uppercase; 
 
} 
 

 
.timer-shadow { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    z-index:-1; 
 
} 
 

 
.timer-shadow span { 
 
    margin: 0 5px; 
 
    display: inline-block; 
 
    -webkit-box-shadow: 0 26px 57px 0 rgba(0, 0, 0, 0.2); 
 
    -moz-box-shadow: 0 26px 57px 0 rgba(0, 0, 0, 0.2); 
 
    box-shadow: 0 26px 57px 0 rgba(0, 0, 0, 0.2); 
 
    width: 110px; 
 
    height: 170px; 
 
}

<div class="timer-container"> 
 
    <div class="timer" style="z-index:4;"> 
 
    <div class="time"> 
 
     <span>12</span> 
 
    </div> 
 
    <div class="label" style="z-index:3;"> 
 
     <span>jours</span> 
 
    </div> 
 
    </div> 
 
    <div class="timer" style="z-index:2;"> 
 
    <div class="time"> 
 
     <span>17</span> 
 
    </div> 
 
    <div class="label"> 
 
     <span>heures</span> 
 
    </div> 
 
    </div> 
 
    <div class="timer" style="z-index:1;"> 
 
    <div class="time"> 
 
     <span>48</span> 
 
    </div> 
 
    <div class="label"> 
 
     <span>minutes</span> 
 
    </div> 
 
    </div> 
 
    <div class="timer"> 
 
    <div class="time"> 
 
     <span>05</span> 
 
    </div> 
 
    <div class="label"> 
 
     <span>secondes</span> 
 
    </div> 
 
    </div> 
 
    <div class="timer-shadow"> 
 
    <span></span> 
 
    <span></span> 
 
    <span></span> 
 
    <span></span> 
 
    </div> 
 
</div>