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 that you have read and understand our privacy policy and code of conduct.

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