CSS div box z-index

Question

Я создал веб-сайт, на котором я использовал тень от блока для наложения тени на блок основного блока

box-shadow: 0 0 10px rgba(0,0,0,0.2);

Проблема в том, что вы не можете указать, где должна появляться тень, кроме как смещение ееместо нахождения.

Это означает, что у меня не может быть двух теней, бегущих по обе стороны от коробки, без тени одновременно на верхней или нижней части коробки!(по крайней мере, на мой взгляд)

То, что я думал, что смогу сделать, это расположить еще один блок "overlay-div" внизу моего блока "main-div", дать ему белый фон и наложить его поверхтень, которую я хочу скрыть ...

Моя проблема в том, что "overlay-div" не только перекрывает поле, которое я хочу скрыть, но также перекрывает следующий div и покрывает часть содержимого.

Есть ли способ наложения, наложения определенного блока, но не другого ???

Я пробовал z-index, но он не работает.Я действительно хочу, чтобы у нижней части # content-footer div не было тени, и чтобы она была гладкой на белом фоне.

Вот мой код:

<style>
#content-footer {
 float: left;
 width: 980px;
 height: 250px;
 padding: 30px 30px 0;
 background: #EBEBEB;
 background: -moz-linear-gradient(#EBEBEB 20%, white 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(20%, #EBEBEB), color-stop(100%, white));
 box-shadow: 0 0 10px rgba(0,0,0,0.2);
 -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.2);
 -moz-box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
#sitemap {
 background-color: white;
 height: 300px;
 float: left;
 width: 920px;
 margin: -130px 30px 0 30px;
 -webkit-border-bottom-left-radius: 5px;
 -webkit-border-bottom-right-radius: 5px;
 -moz-border-radius-bottomleft: 5px;
 -moz-border-radius-bottomright: 5px;
 border-bottom-left-radius: 5px;
 border-bottom-right-radius: 5px;
 box-shadow: 0 5px 5px rgba(0,0,0,0.2);
 -webkit-box-shadow: 0 5px 5px rgba(0,0,0,0.2);
 -moz-box-shadow: 0 5px 5px rgba(0,0,0,0.2);
}
</style>

<div id="content-footer">
    ... content ... 
</div>

<div id="sitemap">
   ... sitemap ...
</div>

Вот чтоЯ пытаюсь достичь:

(http://dl.dropbox.com/u/5456769/gradeint-box-shadow.png)

Answer 1

попробуйте использовать: after или: before псевдоселекторы. Вы также можете градиент с прозрачным фоном на одном конце и #fff на другом.

    #content-footer {
 float: left;
 width: 980px;
 height: 250px;
 padding: 30px 30px 0;
 background: #EBEBEB;
 background: -moz-linear-gradient(#EBEBEB 20%, white 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(20%, #EBEBEB), color-stop(100%, white));
 box-shadow: 0 0 10px rgba(0,0,0,0.2);
 -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.2);
 -moz-box-shadow: 0 0 10px rgba(0,0,0,0.2);
position:relative;
}

#content-footer:after {
position: absolute;
content: "";
background-color: white;
 height: 300px;
 width: 920px;
 margin: -130px 30px 0 30px;
 -webkit-border-bottom-left-radius: 5px;
 -webkit-border-bottom-right-radius: 5px;
 -moz-border-radius-bottomleft: 5px;
 -moz-border-radius-bottomright: 5px;
 border-bottom-left-radius: 5px;
 border-bottom-right-radius: 5px;
 box-shadow: 0 5px 5px rgba(0,0,0,0.2);
 -webkit-box-shadow: 0 5px 5px rgba(0,0,0,0.2);
 -moz-box-shadow: 0 5px 5px rgba(0,0,0,0.2);
}

Answer 2

Это довольно простое решение, просто поместите нижний колонтитул в div с скрытым переполнением и такой же высотой, как и

#content-footer-container {
  overflow:hidden;
  float: left;
  width: 100%;
  height: 280px; //+30px considering padding
}

.Любая тень сверху и снизу будет обрезана, и тень в сторону будет видна, так как ширина больше, чем div нижнего колонтитула.

Answer 3

Если я правильно понимаю ваш пост, у вас будет намерение иметь тень слева, справа и сверху #sitemap и , а не на нижней и нижней сторонах.

Inв этом случае вот решение jsbin .

Ваши попытки с z-index не работали, потому что z-index работает только с элементами, которые имеют fixed, relative,или absolute позиционирование применяется к ним.

Важные детали:

• #sitemap имеет position:relative
• #content-footer isвложены в #sitemap и имеют position:absolute, height:280px и bottom: -280px
• #sitemap и #content-footer имеют одинаковую ширину

Я рекомендую использовать этот инструмент для настройки настраиваемого, ультра-совместимого градиента.