Как заставить фон div сидеть на вершине? - PullRequest
Новая
       7

Как заставить фон div сидеть на вершине?

0 голосов
/ 24 сентября 2018

Я делаю модальную форму.Вот что происходит, когда я открываю свой модал: enter image description here

Как вы видите, изображение логотипа, поиск, меню и корзина находятся поверх моего модального прозрачного фона.Вот мой HTML код: 

<div id="offerModal" class="modal">
  <div class="modal-content">
    <div class="modal-header">
      <span class="closeBtn" onclick="closeModal()">&times;</span>
      <h2 class="modal-header-top">OFFER YOUR PRICE</h2>
      <hr class="hr">
    </div>
    <div class="modal-body">
      <form>

      </form>
    </div>
  </div>
</div>

И CSS код: 

.modal{ 
    position: fixed; 
    z-index: 1000; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    display: none;
    background: rgba(0,0,0,0.5);
}


.modal-content{
    border-style: solid;
    border-width: 10px;
    border-color: rgba(0,0,0,0.7);
    background-color: #f4f4f4;
    margin: 10% auto;
    padding: 10px;
    width: 30%;
    box-shadow: 0 5px 8px 0 rgba(0,0,0,0.2), 0 7px 20px 0 rgba(0,0,0,0.17);
    border-radius: 6px;
}

Так как решить эту проблему?

Ответы [ 3 ]

0 голосов
/ 24 сентября 2018

W3 School Попробуйте этот код 

position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1050;
outline: 0;
display:black;
0 голосов
/ 24 сентября 2018

Как уже упоминалось другими, вам нужно сделать: 

.modal { 
    z-index: 99999; 
}

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

0 голосов
/ 24 сентября 2018

Попробуйте: 

.modal{ 
    position: fixed; 
    z-index: 99999; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    display: none;
    background: rgba(0,0,0,0.5);
}

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

...