Как указать порядок для слоев (в частности, теней)?

Question

Я бы хотел, чтобы тень красной части перекрывала белую, а не наоборот.

Применимо CSS:

#container { (the white part)
  width: 960px;
  margin: 0 auto 24px auto;
  background: #FFFAFA; /*background: url(images/grid.png) center top no-repeat;*/
  box-shadow: 0px 5px 45px #343434;
}

#banner { (the red part)
  background: -moz-linear-gradient(top, #BC4E4C 0%, #9E403F 100%);
  background: -webkit-linear-gradient(top, #BC4E4C 0%, #9E403F 100%);
  height: 40px;
  width: 100%;
  box-shadow: 0px 10px 10px #343434;
  border-bottom: 1px solid #612525;
}

В случае, если это важно, баннер перед основным содержанием в HTML. Спасибо!

Answer 1

Простое добавление position: relative к #banner должно сделать это - будет создан новый «стековый контекст» .

---

На всякий случай: вы также может потребоваться z-index: a number, если в ваш вопрос не включены другие элементы, для которых вы бы хотели, чтобы тень появлялась поверх.

Answer 2

Использовать свойство css z-index.Более высокое значение z-index означает, что элемент находится впереди.

В вашем примере добавьте

#container {
  z-index: 1;
}
#banner {
  z-index: 2;
}

, и он будет работать.