Css box shadow на отключенном контейнере

Изменить: более общий вопрос: Мне нравится тень на divs, однако, когда я помещаю div непосредственно под div box-shadow'd, эта нижняя часть тени не накладывается сверху, несмотря на беспорядок с z-индексами. Итак, похоже, что тень окна не может накладывать другой div? Любые идеи были бы замечательными!

оригинальный вопрос- Я использую план для макета. Это означает, что существует контейнер 950px, который затем содержит #content.

В этом случае #content заполняет весь контейнер, а также 950px.

Я хотел бы иметь тень на #content, но проблема в том, что тень отключается, поскольку в .container нет места, чтобы увидеть ее.

Обходной путь состоял в том, чтобы уменьшить ширину #content, но это испортило расположение макета, которое у меня уже есть, и выглядит слишком узким.

Есть ли способ получить тень окна, чтобы игнорировать родительский контейнер и появиться над ним? Я не думаю, что это конкретный план, но это контекст. спасибо!

EDIT:

body .container {
    margin: 0 auto;
    overflow: hidden;
    width: 950px;
}
body .container:after {
    clear: both;
    content: "";
    display: table;
}
#content {
    display: inline;
    float: left;
    margin-right: 0;
    width: 950px;
    box-shadow: 0 0 4px black;
    -moz-box-shadow: 0 0 4px black;
}

#content находится непосредственно в .container. Если я поставлю тень на #content, вы не сможете ее увидеть, пока я не скрою ширину, которая будет беспорядочна с внутренними элементами.

ОТВЕТЫ

Ответ 1

Я добавил бы дополнение к элементу .container и обеспечил бы, чтобы ваш #content оставался на нужной вам ширине.

Ответ 2

Вам не нужно overflow: hidden в .container, так как вы уже используете для него четкое исправление. Итак, вы можете просто выбросить его: http://jsfiddle.net/kizu/gDXLf/

Ответ 3

Вы можете увеличить ширину .container(960 идеально подходит для фиксированной ширины) и сохраните #content в центре .container. Это что-то для вас чем-то неприятно?

Ответ 4

Все зависит от того, чего вы пытаетесь достичь.

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

Простой взлом - это просто добавить к элементу следующее:

li:hover {
    transform: scale(1,1);
    -moz-transform: scale(1,1);
    -webkit-transform: scale(1,1);
    -o-transform: scale(1,1);
    -ms-transform: scale(1,1);
}

РАБОЧИЙ ПРИМЕР

Хотя это может работать только для определенных сценариев. Я тестировал его только на моем примере выше.