1

Есть блок (карточка товара), у которого есть свойство perspective: 1000px (чтоб переворачивать красиво). Внутри него находится другой блок (модальное окно), у которого свойства:

position: fixed;
left: 0;
right: 0;
bottom: 0;
top: 0;

По идее модальное окно должно быть поверх всех остальных блоков и перекрывать все, но в документации написано следующее:

за исключением случаев, когда один из его предков имеет свойство transform, perspective, или filter, установленное на что-то иное, кроме none

Соответственно, модальное окно остается внутри карточки товара.

Вопрос: как мне отобразить модальное окно поверх всех блоков, не убирая при этом свойство perspective у родителя?

P.S. Если интересно, каким образом так получилось, что модальное окно находится внутри карточки товара, скажу, что пишу на React и пока вижу такое решение самым лучшим.

3 ответа 3

0

Установи правильно z-index (99999 для теста) и попробуй position:absolute на модалке.

На будущее все модалки выводи вне потока карточек, в конце страницы.

1
  • 2
    С position: absolute та же история. z-index тоже не помогает
    – qwaaaaz
    8 янв 2022 в 11:22
0

Решение оказалось очень простым. Я в div положил карточку товара и модальное окно так, чтобы они находились на одном уровне DOM-дерева.

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

-1

Попробуй поиграться с z-index. Чем больше значение, тем выше находится элемент по сравнению с теми элементами, у которых оно меньше.

Пример:

/*CSS*/

#layer1, #layer2, #layer3, #layer4 {
    position: relative; /* Относительное позиционирование */
   } 
   #layer1, #layer3 {
    font-size: 50px; /* Размер шрифта в пикселах */
    color: #000080; /* Синий цвет текста */
   }
   #layer2, #layer4 {
    top: -55px; /* Сдвигаем текст вверх */
    left: 5px; /* Сдвигаем текст вправо */
    color: #ffa500; /* Оранжевый цвет текста */
    font-size:70px;  /* Размер шрифта в пикселах */
   }
   #layer1 { z-index: 2; }
   #layer2 { z-index: 1; }
   #layer3 { z-index: 3; }
   #layer4 { z-index: 4; }
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>z-index</title>
 </head>
 <body>
  <p>Слой 1 наверху</p>
  <div id="layer1">Слой 1</div>
  <div id="layer2">Слой 2</div> 
  <p>Слой 4 наверху</p>
  <div id="layer3">Слой 3</div>
  <div id="layer4">Слой 4</div> 
 </body>
</html>

1
  • 1
    z-index не помогает
    – qwaaaaz
    8 янв 2022 в 11:22

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.