Как решить проблему отображение тени (css+html)?

Question

[weranda]

Приветствую.
Суть проблемы в следующем: при установке цвета блоку пропадает пересечение тени с другим блоком. Без установки цвета блоку пересечение работает нормально.

Ссылка на jsfiddle

Для наглядности - картинка (врхний блок без заливки отображает тень, нижний нет):

<style>
  body{
    background: #f7f7f7;
  }
  .wrap, .wrap1{
    width: 500px;
    margin: 50px auto;
  }

  .section{
    width: 20%;
    float: left;
  }

  .goods{
    border: 1px solid #e6e6e6;
    height: 100px;
    margin: -1px 0 0 -1px;
    padding: 15px;
    height: 100px;
    display: block;
  }
  .goods:hover{box-shadow: rgba(0, 0, 0, 0.14902) 0px 2px 10px 0px;}

  .wrap1 .goods{
    background: #FFF;
  }
</style>

<div class="wrap">

  <div class="section">
    <div class="goods">-</div>
  </div>

  <div class="section">
    <div class="goods">-</div>
  </div>

  <div class="section">
    <div class="goods">-</div>
  </div>

  <div class="section">
    <div class="goods">-</div>
  </div>

  <div class="section">
    <div class="goods">-</div>
  </div>
</div>

<br><br><br><br><br><br><br><br><br><br>

<div class="wrap1">

  <div class="section">
    <div class="goods">-</div>
  </div>

  <div class="section">
    <div class="goods">-</div>
  </div>

  <div class="section">
    <div class="goods">-</div>
  </div>

  <div class="section">
    <div class="goods">-</div>
  </div>

  <div class="section">
    <div class="goods">-</div>
  </div>
</div>

Answer 1

[Serj-One]

Блок справа по оси Z находится выше левого и перекрывает его тень. Это незаметно, пока блоки прозрачны.
Для решения проблемы нужно поднять блок с ховером над остальными.

.goods:hover{
    position: relative;
    z-index:1;
}

jsfiddle.net/L0u9ry1e
В вашем случае указывать z-index не обязательно, т.к. блок всего один, указал его для наглядности и понимания сути решения проблемы. Если же наложенных и перекрывающих друг друга блоков несколько, их расположение на оси Z регулируется значением z-index'а.

Comments

[weranda]

Спасибо. Работает.

Answer 2

[archelon]

оставьте блок прозрачным, но задайте цвет родительскому блоку.

Comments

[weranda]

Не вариант. Внутренние блоки в процентах, а родительский блок в реальности не равен точному количеству пикселей разделенным на пять. Справа остается один два пикселя.

[archelon]

ммм, не понимаю. почему не равен? если внутренние блоки имеют ширину = ширина родительского блока / 5, значит родительский блок равен ширине внутреннего блока * 5.
арифметика.

[weranda]

По факту родительский блок на сайте равен 988px, внутренних блоков пять с шириной каждого 20%. Разделите 988 на 5 и вам все станет ясно.

[archelon]

странная у вас сетка.
впрочем, неважно
решение domrachew лучше.