Как сделать div фон сидеть на вершине?
Я делаю модальную форму. Это то, что происходит, когда я открываю свой модальный:
Как вы можете видеть изображение логотипа, поиск, meniu и корзина находятся поверх моего модального прозрачного фона. Вот мой HTML-код:
<div id="offerModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<span class="closeBtn" onclick="closeModal()">×</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;
}
Так как же решить эту проблему?
У вопроса есть решение - Посмотреть?

а css для заголовка ? может быть, Z-индекс больше
Источник

наверное, это проблема Z-индекса. Что такое ссылка для теста?
Источник

Источник

без правил для этих элементов мы просто будем гадать, что вызывает сдвиг z-индекса.
Источник
Ответы - Как сделать div фон сидеть на вершине? / How to make div background sit on top?

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

Является ответом!


Спасибо! Z-индекс области заголовка был установлен на 10. Я изменил его на 1 и теперь все работает нормально :)
Помочь в развитии проекта: