如何使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

尝试去：

Environment

如果有第三方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。