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


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

24.09.2018 08:12:09 Просмотров 113 Источник

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

Как вы можете видеть изображение логотипа, поиск, meniu и корзина находятся поверх моего модального прозрачного фона. Вот мой 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;
}

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

html css prestashop
У вопроса есть решение - Посмотреть?

https://stackoverflow.com/questions/52484285/how-to-make-div-background-sit-on-top#comment91910053_52484285
а css для заголовка ? может быть, Z-индекс больше
https://stackoverflow.com/questions/52484285/how-to-make-div-background-sit-on-top#comment91910112_52484285
наверное, это проблема Z-индекса. Что такое ссылка для теста?
https://stackoverflow.com/questions/52484285/how-to-make-div-background-sit-on-top#comment91910270_52484285
https://stackoverflow.com/questions/52484285/how-to-make-div-background-sit-on-top#comment91910383_52484285
без правил для этих элементов мы просто будем гадать, что вызывает сдвиг z-индекса.

Ответы - Как сделать div фон сидеть на вершине? / How to make div background sit on top?

kawnah

24.09.2018 08:22:09

Попробуй пойти:

.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-index, он может быть установлен где-то еще, но трудно сказать, что предусмотрено.

Источник
Kondal

24.09.2018 08:23:13

Школа W3 Попробуйте этот код

position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1050;
outline: 0;
display:black;
Источник
Является ответом!
Cnye

24.09.2018 08:27:36

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

.modal { 
    z-index: 99999; 
}

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

Источник
https://stackoverflow.com/questions/52484285/how-to-make-div-background-sit-on-top/52484469#comment91912998_52484469
Спасибо! Z-индекс области заголовка был установлен на 10. Я изменил его на 1 и теперь все работает нормально :)
Помочь в развитии проекта:

Другие вопросы

Ответы на ваши вопросы

Закрыть X