makc9I
@makc9I
фрилансер, web разработчик

Как сделать внутренний блок с отрицательным z-index высотой с содержимое?

Всем привет.
Есть такая структура страницы:

<body>
<div class="wrap">
 
   <div class="item">
   </div>
 
</div>
</body>


для класса item заданы сложные наклонные тени, заданы они подобным способом:

.item:before,
.item:after {
        content:"";
        position:absolute;
        z-index:-2;
        bottom:10px;
        left:10px;
        width:47%;
        height:20%;
        max-width:300px;
    -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.6);
       -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.6);
            box-shadow:0 15px 10px rgba(0, 0, 0, 0.6);
    -webkit-transform:rotate(-3deg);
       -moz-transform:rotate(-3deg);
        -ms-transform:rotate(-3deg);
         -o-transform:rotate(-3deg);
            transform:rotate(-3deg);
}
         
.item:after {
    right:10px;
    left:auto;
    -webkit-transform:rotate(3deg);
       -moz-transform:rotate(3deg);
        -ms-transform:rotate(3deg);
         -o-transform:rotate(3deg);
            transform:rotate(3deg);
}


Как видно, чтобы от псевдоэлементов (наклонные блоки) торчала только тень, он уводится на дальний слой с помощью z-index: -2;
Проблемка заключается в том, что если я задам тень диву с классом wrap, то наши тени пропадают, так как они уходят на невидимый слой, за наш заданный фон. Самому wrap задавать отрицательный z-index нельзя, так как внутри спрячется и весь контент.
Я в свое время решил проблему так. Создал еще один блок с id=background

<body>
<div id="background"></div>
<div class="wrap">
 
   <div class="item">
   </div>
 
</div>
</body>


И прописал ему следующие стили:

background: linear-gradient(110deg, #F3F3F3 1%, #F3F3F3 765px, #FFFFFF 766px, #FFFFFF 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
    height: 900px;
    position: absolute;
    width: 1000px;
    z-index: -10;


Все бы хорошо, но как видите, высота задана 900px, такую же высоту я задавал для wraper как min-height, чтобы якобы прилепить футер книзу, но потом я понял, что это не комильфо и прилепил футер к низу способом с отрицательным padding. Пытался я заменить height:900px на height:100%, но высота блока с идентификатором background получалась размером с экран, это и понятно, ведь внутри нет содержимого.

Как можно поменять структуру или какие css свойства применить, чтобы был и фон и не пропадали тени у элементов item?

Чтобы было наглядней, как должно выглядеть, вот сайт: musaget.net
В этой версии футер не является плавающим и поэтому мой трюк с доп блоком с id=background работает, но, как я сказал, я сделал футер прилепленным к низу нормальным способом, а не костылем.

На данном сайте wraper=all, background=background, item=item
  • Вопрос задан
  • 2861 просмотр
Пригласить эксперта
Ответы на вопрос 8
Zoxon
@Zoxon
Веб-разработчик
Ответ написан
Комментировать
Zoxon
@Zoxon
Веб-разработчик
А почему бы картинкой тень не сделать?
Ответ написан
Комментировать
makc9I
@makc9I Автор вопроса
фрилансер, web разработчик
Ответ написан
Комментировать
makc9I
@makc9I Автор вопроса
фрилансер, web разработчик
Картинкой то наверно можно, но не очень хочется. Неужели других решений нет?
Я еще вижу решение jsом мерять высоту блока all и забивать эту высоту в блок background, но тоже как то не комильфо
Ответ написан
Комментировать
Zoxon
@Zoxon
Веб-разработчик
Правда не очень понял, что вы хотите, но вот jsfiddle.net/Zoxon/f58VP
Ответ написан
Комментировать
makc9I
@makc9I Автор вопроса
фрилансер, web разработчик
попытаюсь объяснить, что я хочу.
У меня есть градиентный фон, который должен быть фиксирован в определенной позиции, т.е. не сдвигаться влево вправо при изменении размера окна.
Для этого я создал внутри wrap div с id=background.
Это решение применено здесь
Проблема в том, что в стиле для #background написано height:900px, мне же нужно, чтобы данный блок занимал всю ширину контента wrap. height:100% не проходит. В этом случае фон отображается только на высоту одного экрана и если скрольнуть ниже, то он пропадает.
Вроде бы логично задать фон напрямую для .wraper, не создавая лишних блоков, но в этом случае пропадают тени у .item
Вот в чем проблема
Ответ написан
Комментировать
makc9I
@makc9I Автор вопроса
фрилансер, web разработчик
все было так просто? Заменить стиль для html, body {height:100%} на min-height:100%;
Действительно работает, надеюсь, на работоспособность прижимания футера к низу не повлияет
Ответ написан
makc9I
@makc9I Автор вопроса
фрилансер, web разработчик
Я использовал тот же вариант для того, чтобы прижать футер, и как раз в нашем варианте надо использовать height:100% для html, body.
Как только я пишу так, футер прижимается к низу, но фон занимает только один экран, как только меняю на min-height:100%, фон начинает себя вести правильно, но футер прыгает на высоту контента.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы