Как сделать так, чтобы модалка была не под обрез внизу при прокрутке, а чуть выступала на 10px?

Question

[Vlad999777]

Высота контента модального окна превышает высоту экрана, все ок при прокрутке, но хочется чтоб модального окно было не в срез по низу, а чуть выезжала наверх на 10px от границы экрана.

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(128, 128, 128, 0.1);
    z-index: 9999; 
    overflow-y: auto;
   } 
   
   .modal-content {
    position: absolute;
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); 
    z-index: 10000; 
    max-width: 50%; 
    overflow-y: auto;   
  }

<div className="modal-overlay"  onClick={handleCloseModal}>
          <div className="modal-content">
......
</div>
</div>

Comments

[VoidVolker]

Vlad999777 Правила 3.8

[Ankhena]

Удобно позиционировать центральную часть гридами (3х3), а не абсолютом. Ну или флексом.

Answer 1

[Сергей delphinpro]

.modal-overlay {
  padding: 20px;
  box-sizing: border-box;
}

Comments

[Vlad999777]

Нет...не работает