Почему элемент скрывается под другими и как это исправить?

Question

[денис]

Доброго дня!

Я делаю сайт для проекта. Есть элемент - чистая сетка(grid.svg ) и другие блоки(). У других блоков есть прозрачность. Сетка двигается всё время вместе с пользователем(background-atachment: fixed).
Почему-то у меня сетка начинает скрываться(прятаться(?)) когда только заходит под другой объект(прятаться, обрезаться).

Это сетка
#bgsvg {
    position: absolute;
    background-position: center;
    background-repeat: no-repeat;    
    background-image: url("../images/bg.svg");
    background-size: auto;
    z-index: -1;
    background-attachment: fixed;
    width: 1602px;
    height: 642px;
}

Что делать?

Comments

[0xD34F]

3.1, 3.4

[Владислав Лысков]

z-index

[Антон Усачев]

1. Вытащить из контейнера на самый верх дерева элементов (вероятная причина: обрезается контейнером с overflow: hidden).
2. Задать z-index больше всех. Например, 99999.
3. Чтобы сетка не мешала взаимодействию с элементами на странице, задать pointer-events: none.
4. Если сетка нужна для отладки, то можно дополнительно поиграть с эффектами background-blend-mode.

Answer 1

[Олег Файн]

Здарова! Тут тема скорее всего в том, что ты сетке задал z-index: -1, а это значит, что она всегда будет под всеми остальными элементами. Когда элемент с z-indexом меньше чем у других блоков, он просто прячется под ними. Прозрачность тут не спасает, потому что блоки всё равно будут перекрывать сетку.

Чтобы сетка нормально отрисовывалась поверх, можешь попробовать задать сетке более высокий z-index (например, z-index: 0 или больше), а другим блокам назначить z-index, который будет меньше или равен 0, или просто не трогать их z-index, если не нужно.

Вот так попробуй:

#bgsvg {
    position: fixed; /* Поменял position на fixed для фиксации сетки */
    background-position: center;
    background-repeat: no-repeat;
    background-image: url("../images/bg.svg");
    background-size: auto;
    z-index: 0; /* Повышаем индекс, чтобы сетка была выше остальных элементов */
    width: 1602px;
    height: 642px;
}

Тут мы ещё position: fixed бахнули, чтобы сетка точно двигалась за пользователем и не пряталась под другими элементами. Твой background-attachment: fixed тоже можно убрать, потому что position: fixed уже всё это делает. Короче, попробуй так — должно помочь!