css3 тень под другим div, z-index не работает

я пытаюсь использовать тень, чтобы она выглядела так, как будто один div (заголовок) находится «над» другим. моя проблема в том, что "средний" div закрывает тень. я попытался использовать z-index, чтобы поместить заголовок div в средний div, но это не работает (тень все еще скрыта). когда я ставлю разрыв между элементами div, я вижу тень и поэтому знаю, что часть кода работает правильно. у меня есть следующий html-код:

<div id='portal_header_light'>
<img src="Home.png" height="32px" \>
<img src="Wrench.png" height="32px" \>
</div>
<div id='middle'></div>

и этот css:

#portal_header_light {
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px; text-align:center;
    -moz-border-radius: 3px 3px 3px 3px;
    -webkit-border-radius: 3px 3px 3px 3px;
    padding: 0px 3px 0px 3px;
    background: -moz-linear-gradient(center top, #999999 0%,#ffffff 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #999999),color-stop(1, #ffffff));

    -webkit-box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.3);
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);

    z-index:5;
}

#middle{
    height:308px;
    background-color:white;
    z-index:-1;
}

Любые идеи? благодаря.


html css z-index dropshadow
person vee    schedule 15.07.2010    source источник
comment
Также для некоторых может быть полезен stackoverflow.com/a/54903621/9868445.   -  person aderchox    schedule 16.07.2021

Ответы (3)


arrow_upward
188
arrow_downward

Свойство z-index работает только с элементами positioned. К ним относятся элементы position: relative, position: absolute, position: fixed и position: sticky.

Попробуйте дать вашему div #middle position: relative.

person gearsdigital    schedule 15.07.2010
comment
примечание: родители всегда ловят тень дочерних элементов, независимо от позиции и z-индекса (иначе может быть полезно в подменю...) — codepen.io/anon/pen/obJQEJ - person Frank Nocke; 11.02.2016

arrow_upward
19
arrow_downward

Попробуйте вставить тень блока на элементе, под которым вы хотите появиться.

.element-that-is-to-be-under{
    -webkit-box-shadow: inset 0 8px 4px -4px #ddd;
    -moz-box-shadow: inset 0 8px 4px -4px #ddd;
    box-shadow: inset 0 8px 4px -4px #ddd;
}

Это облегчит перетасовку z-индекса, и в долгосрочной перспективе вы будете намного счастливее.

person wittmason    schedule 26.04.2012

arrow_upward
8
arrow_downward

Основываясь на других ответах здесь, я обнаружил, что это работает лучше, если поставить position: relative на #portal_header_light вместо #middle. Тогда мне не нужно было иметь z-index: -1, который (по крайней мере, в Chrome) испортил эффекты наведения курсора на ссылку и вызвал некоторые другие странные проблемы.

http://jsfiddle.net/thaddeusmt/m6bvZ/

Вот упрощенный код:

<div id="portal_header_light">Header Content</div>
<div id="middle">Test Content</div>

#portal_header_light {
  position: relative;
  padding: 3px;
  background: #eee;
  -webkit-box-shadow: 0px 4px 10px -2px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0px 4px 10px -2px rgba(0, 0, 0, 0.3);
  box-shadow:  0 4px 10px -2px rgba(0, 0, 0, 0.3);
  z-index:5;
}

#middle{
  height:308px;
  background-color:#fee;
  padding: 3px;
}
person thaddeusmt    schedule 10.12.2013