Как перекрыть блок?

Ссылка скопирована
CSS HTML PHP
1 ответ 
.popup {   position: relative;   width: 100%;   height: 100vh;   &::before {       display: block;       position: absolute;       content: '';       background: linear-gradient(0deg, #FFFFFF 9.15%, rgba(255, 255, 255, 0) 100%);       width: 100%;       height: 200px;       right: 0;       bottom: 0;   } }

.popup { position: relative; width: 100%; height: 100vh; &::before { display: block; position: absolute; content: ''; background: linear-gradient(0deg, #FFFFFF 9.15%, rgba(255, 255, 255, 0) 100%); width: 100%; height: 200px; right: 0; bottom: 0; } }

в блоке popup есть скролл. когда скроллю в конец блока не могу взаимодействовать с элементами (в частности со скроллом) под псевдоэлементом с градиентом. есть ли какой-нибудь вариант сделать его видимым, но не перекрывающим нижний блок?

Дополнительно:

::before {   pointer-events: none; }

::before { pointer-events: none; }

Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь
Лучший ответ
1
Елена Вебер Ответ

Для перекрытия блока в HTML и CSS можно использовать свойство z-index. Z-index определяет порядок слоев элементов на странице - чем больше значение z-index, тем выше элемент находится на странице.

Пример использования z-index:

 
 
 
 
    .block1 {
        width: 200px;
        height: 200px;
        background-color: red;
        position: absolute;
        top: 50px;
        left: 50px;
        z-index: 1;
    }
    .block2 {
        width: 150px;
        height: 150px;
        background-color: blue;
        position: absolute;
        top: 100px;
        left: 100px;
        z-index: 2;
    }
 
 
 
 
<div class="block1"></div>
<div class="block2"></div>

.block1 { width: 200px; height: 200px; background-color: red; position: absolute; top: 50px; left: 50px; z-index: 1; } .block2 { width: 150px; height: 150px; background-color: blue; position: absolute; top: 100px; left: 100px; z-index: 2; } <div class="block1"></div> <div class="block2"></div>

В данном примере у нас есть два блока - block1 и block2. Блок block2 имеет более высокое значение z-index, чем блок block1, поэтому block2 будет отображаться поверх block1.

Если вам нужно перекрыть блок, просто установите у соответствующего блока более высокое значение z-index, чем у других блоков, которые должны быть под ним. Таким образом, вы сможете контролировать порядок слоев элементов на странице и перекрывать их по вашему усмотрению.

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Вам также может быть интересно

VPN Как правильно настроить vless для Android TV? 1 ответ Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 1 ответ печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 1 ответ Telegram Как добиться, чтобы Telegram прислал мне именно смс код, а не через звонок его диктовал? 1 ответ