なぜ背景色がボックスシャドウと重なっているのですか？

Question

私はbackground-colorのセルを持つテーブルを持っています。私はtheadのためにbox-shadowを設定しようとしていますが、最初の列のセルの背景は影に重なっています。私は別のz-index値とposition: relativeを設定しようとしましたが、役に立たないです。ところで

.results-table { 
 
    width: 100%; 
 
    border-collapse: separate; 
 
    border-spacing: 0; 
 
    table-layout: fixed; 
 
} 
 

 
.results-table th, 
 
.results-table td { 
 
    padding: 1em; 
 
    width: 96px; 
 
    border-left: 1px solid rgba(34, 36, 38, 0.1); 
 
    border-top: 1px solid rgba(34, 36, 38, 0.1); 
 
} 
 

 
.results-table thead { 
 
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12); 
 
    position: relative; 
 
} 
 

 
.results-table thead th { 
 
    background: #E0E0E0; 
 
    border-bottom: 1px solid rgba(34, 36, 38, 0.1); 
 
} 
 

 
.results-table tr:first-child td, 
 
.results-table tr:first-child th { 
 
    border-top: none; 
 
} 
 

 
.results-table tr th:first-child, 
 
.results-table tr td:first-child { 
 
    border-left: none; 
 
} 
 

 
.item-cell.item-cell { 
 
    width: 128px; 
 
} 
 

 
td.item-cell.item-cell { 
 
    background: lightgreen; 
 
}

<table class="results-table"> 
 
    <thead> 
 
    <tr> 
 
     <th class="item-cell"> 
 
     Item 
 
     </th> 
 
     <th> 
 
     Package 
 
     </th> 
 
     <th> 
 
     Price 
 
     </th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td class="item-cell"> 
 
     <a href="#">Link 1</a> 
 
     </td> 
 
     <td>Package 1</td> 
 
     <td>Price 1</td> 
 
    </tr> 
 
    <tr> 
 
     <td class="item-cell"> 
 
     <a href="#">Link 2</a> 
 
     </td> 
 
     <td>Package 2</td> 
 
     <td>Price 2</td> 
 
    </tr> 
 
    <tr> 
 
     <td class="item-cell"> 
 
     <a href="#">Link 3</a> 
 
     </td> 
 
     <td>Package 3</td> 
 
     <td>Price 3</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

、影がFirefoxで動作しますが、他のブラウザでは動作しません。 thead要素のための影を実装するためにどのように

Firefox [image]

Chrome, Opera, Edge, IE11 [image]

？

ありがとうございました。

Answer 1

は、あなたがこれを変更することができtd

.results-table td{ 
    position: relative; 
    z-index: -1; 
} 

Answer 2

にz-indexnegativeを追加します。

box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12); 

これに：

box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12); 
-webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12); 
-moz-box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);