CSS - тень блока не отображается при использовании: before и z-index

Моя цель - предотвратить перекрытие тени блока поверх соседних элементов с помощью :before и z-index.

Но тень проходит под контейнером элемента списка, который ее отбрасывает из-за z-index.

Он отлично работает, если его родительский контейнер - это просто body.

Есть ли способ обойти это или мне следует изменить свой HTML и CSS

HTML (PUG)

div#main
  ul
    li
    li
    li

CSS (Стилус)

#main
  background-color lightyellow
  height 300px
  width 300px

ul
  padding 10px

  li
    background-color lightblue
    height 50px
    width 50px
    margin 10px
    position relative

  &::before
    content ''
    box-shadow 0px 0px 15px 20px rgba(0,0,0,0.5)
    position absolute
    top 0px
    right 0px
    bottom 0px
    left 0px
    z-index -1

html css box-shadow
person CRIS    schedule 29.08.2016    source источник

Ответы (2)


arrow_upward
0
arrow_downward

вы используете абсолютно позиционированные pseudo элементы, не устанавливая position: relative для его родительского элемента, т.е. почему он вызывает этот тип проблем, вы также не установили некоторые базовые правила CSS для лучшего результаты как:

Фрагмент кода

html,
body {
  margin: 0;
  padding: 0;
}
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#main {
  background-color: lightyellow;
  height: 300px;
  width: 300px;
}
ul {
  padding: 10px;
  margin: 0;
  position: relative;
}
ul li {
  background-color: lightblue;
  height: 50px;
  width: 50px;
  margin: 10px;
  position: relative;
  overflow: hidden;
}
ul li::before {
  content: '';
  box-shadow: 0px 0px 15px 20px rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0px;
  left: 0px;
  display: inline-block;
  width: 100%;
  height: 1px;
}
<div id="main">
  <ul>
    <li>List01</li>
    <li>List02</li>
    <li>List03</li>
  </ul>
</div>

person vivekkupadhyay    schedule 29.08.2016
comment
хмммм, мне нужно, чтобы тени исходили от lis - person CRIS; 29.08.2016
comment
Я попытался изменить ul :: before на li :: before, но тени все еще перекрывают элементы - person CRIS; 29.08.2016

arrow_upward
0
arrow_downward

Я нашел ответ, я не знаю, лучший ли это путь

HTML (PUG)

ul
  li
    div.content
      span All
  li
    div.content
      span By
  li
    div.content
      span Myself
  li
    div.content
      span ANYMORE!!!

CSS (СТИЛУС)

body
  margin 15px

ul
  display inline-block

li
  width 120px
  height 50px

.content
  background-color lightyellow
  border 1px solid rgba(0,0,0,0.85)
  widows 100%
  height 100%
  position relative

  &::after
    box-shadow 0px 0px 15px 5px rgba(0,0,0,0.5)
    position absolute
    top 0
    right 0
    left 0
    bottom 0
    content ''
    z-index -1

  span
    position absolute
    top 50%
    left 50%
    transform translate(-50%, -50%)
person CRIS    schedule 29.08.2016