如何让 div 背景置顶？

Question

我正在制作模态表单。这是我打开模态时发生的情况：

如您所见，徽标图像、搜索、菜单和购物车位于我的模态透明背景之上。这是我的 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;
}

那么如何解决这个问题呢？

Answer 1

试试看：

.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 可能会在其他地方设置，但很难说提供了什么。

Answer 2

W3 School 试试这个代码

position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1050;
outline: 0;
display:black;

Answer 3

正如其他人所提到的，你会想要做：

.modal { 
    z-index: 99999; 
}

如果失败，则可能值得将徽标、搜索栏和购物车区域类上的 z-index 减少到 1。

如何让 div 背景置顶？

How to make div background sit on top?

html

css

prestashop