I'm making a modal form. This is what happens when I open my modal:
As you can see logo image, search, meniu and cart is on top of my modal transparent background. Here is my HTML code:
<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>
And CSS code:
.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;
}
So how to fix this problem?
z-index:99999;
on that modal, that should do it.