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%, фон начинает себя вести правильно, но футер прыгает на высоту контента.
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
02 нояб. 2024, в 23:04
80000 руб./за проект
02 нояб. 2024, в 21:08
2000000 руб./за проект