Фонд 6 Вложенный модал, выпуск Z-index - PullRequest
Новая
       113

Фонд 6 Вложенный модал, выпуск Z-index

1 голос
/ 28 сентября 2019

Я пытаюсь поместить крестовую кнопку в верхнем правом углу, как показано на рисунке; ​​Close Modal not displayed properly Z-индекс не работает для вложенного модального слоя. Это слой Z- Индекс, который был использован, .reveal-overlay with position: fixed и значение Z-index 1005, внутри которого .reveal с z-index 1006, и я хочу иметь тесную модальность поверх всего.- Код -

HTML - 

<div class="reveal-overlay">
   <div class="reveal">
      <div class="close-modal">
      </div>
   </div>
</div>

CSS - 

.reveal-overlay {
   position: fixed;
   z-index: 1005;
}
.reveal {
   position: relation;
   z-index: 1006;
}

Если я задаю положение: абсолютное значение для закрытия модального и z-index: 1007, оно делаетне выдвигайте никаких предположений о том, почему это происходит, или ошибку, которую я совершаю, чтобы исправить это?Я прочитал эти ссылки переполнения стека для ссылок - 1. CSS Я хочу, чтобы div был поверх всего 2. CSS z-index не работает (абсолютная позиция) 3. Помещение чего-то поверх модала (Zurb Foundation) 4. https://philipwalton.com/articles/what-no-one-told-you-about-z-index/

Ссылка для кодового пера - https://codepen.io/IamManchanda/pen/PmaxBz

В этом, крестик вверхний правый угол должен быть размещен за пределами белого поля.Спасибо всем, кто помогает мне с этой проблемой.

...