css box тень на контейнере div отрезаны - PullRequest
Новая
       32

css box тень на контейнере div отрезаны

11 голосов
/ 14 сентября 2011

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

оригинальный вопрос- Я использую план для макета. Это означает, что есть .container 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, вы не сможете ее увидеть, пока я не уменьшу ширину, что мешает внутренним элементам.

Ответы [ 4 ]

3 голосов
/ 14 сентября 2011

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

2 голосов
/ 16 сентября 2011

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

0 голосов
/ 14 июля 2014

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

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

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

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);
}

ПРИМЕР РАБОТЫ

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

0 голосов
/ 14 сентября 2011

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

...