Как правильно перекрыть 2 слоя через z-index?

Есть макет, снизу и сверху страницы накладывается фон (высотой 1000пкс).
Решил реализовать через псевдоэлементы :before, :after. Прописываю их к body:

body:after {content:'';position: absolute;height: 1207px;width: 100%;background: url(img/footer-bg.png) no-repeat;bottom:0px;z-index: 1}

Аналогично и для body:before. Проблема в следующем, этот фон перекрывает футер и шапку, т.е нельзя выделить текст, ну и в общем все это выглядит не так как нужно. Если прописываю для всех блоков z-index > 1, толку никакого (как понял это потому. что они вложены в body).

Создал просто див в конце страницы и тоже через :after добавил фон, ситуация получается такая: фон налезает на фон блоков (должен быть под ним), но не налезает на текст, т.е если смотреть по слоям то выглядит это так: текст -> фон через :after -> фон блока -> фон контейнера. А должно быть так: текст -> фон блока -> фон через :after -> фон контейнера, Задание z-index для блока большим 1 тоже не увенчалось успехом. Как решить проблему правильно?
  • Вопрос задан
  • 1312 просмотров
Решения вопроса 1
sadisme
@sadisme
font-size:30rem
Вы в курсе, что уже множественные бэкграунды есть?
Что-то вешать на body не очень хорошая идея само по себе. Вешайте на другие контейнеры...футер или шапку, например.

А для того что убрать элемент под родителя, before/after должны иметь z-index:-1 и родитель не должен иметь z-index'a
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
rdd
@rdd
Только хардкор
body:before { z-index: -1; }??
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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