z-index在模态弹出框扩展器中不起作用。

在模态弹出框扩展器中，如果z-index属性不起作用，可能是因为父元素或其他元素的z-index值比弹出框的z-index值更高。

解决方法之一是使用position属性来改变元素的层叠顺序。下面是一个示例代码：

HTML代码：

<div class="modal">
  <button class="open-modal">打开弹出框</button>
  <div class="modal-overlay">
    <div class="modal-content">
      <h2>模态弹出框</h2>
      <p>这是一个模态弹出框的内容。</p>
      <button class="close-modal">关闭</button>
    </div>
  </div>
</div>

CSS代码：

.modal {
  position: relative;
  z-index: 1;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 2;
  display: none;
}

.modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  padding: 20px;
  z-index: 3;
}

.open-modal {
  position: relative;
  z-index: 4;
}

.close-modal {
  position: absolute;
  bottom: 10px;
  right: 10px;
}

JavaScript代码：

document.querySelector('.open-modal').addEventListener('click', function() {
  document.querySelector('.modal-overlay').style.display = 'block';
});

document.querySelector('.close-modal').addEventListener('click', function() {
  document.querySelector('.modal-overlay').style.display = 'none';
});

在上述代码中，我们通过设置模态弹出框的父元素（.modal）的z-index属性为1，模态弹出框的遮罩层（.modal-overlay）的z-index属性为2，模态弹出框的内容（.modal-content）的z-index属性为3，打开弹出框按钮（.open-modal）的z-index属性为4，来确保弹出框的层叠顺序正确。同时，还使用了position属性来控制元素的层叠顺序。

这样，无论有多少个模态弹出框，都可以通过调整各个元素的z-index属性和position属性来确保层叠顺序正确，并且z-index属性在模态弹出框扩展器中能够起作用。