@weranda

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

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

Ссылка на jsfiddle

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

8VMGdttdWH5gl7quX7NVwx7AnVcg_qFMctI3PxAW
<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>
  • Вопрос задан
  • 4156 просмотров
Решения вопроса 1
Serj-One
@Serj-One
i'm sexy and i know it
Блок справа по оси Z находится выше левого и перекрывает его тень. Это незаметно, пока блоки прозрачны.
Для решения проблемы нужно поднять блок с ховером над остальными.
.goods:hover{
    position: relative;
    z-index:1;
}

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы