html - 如何使模态框在其父div之外打开

Question

我正在父 div 内设置一个带有打开按钮的弹出模式，但当它打开时，它包含在 div 内，并且我希望它在所有 div 顶部打开。

我尝试将 z-index 设置为高于父 div，但似乎没有什么区别。我怀疑这与父 div 的位置有关，父 div 位于其父 div 内的绝对中间和中心位置。如果我从 div 中取出模式，它会像我需要的那样以全屏方式打开。

<div id="parent1" style="position:relative;height:100%;z-index:1;">
  <div id="parent2" style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;width:100%;z-index:2;">
    (modal, which is set to z-index:3)
  </div>
</div>

Answer 1

您已将 absolute div 包装在一个 relative div 内。这就是为什么它在里面。下面的代码片段将告诉您相对定位和绝对定位如何协同工作。

  .top {
  top: 50px;
  height: 100%;
  position: relative;
}

.relative {
  background: #dfdfdf;
  ) body {
    height: 100%;
  }
  .absolute {
    position: absolute;
    bottom: 0;
  }

<div class="relative top">
  <div class="absolute bottom">hey there</div>
</div>

div 应该一直向下，但不是，因为它被相对的 div 包裹着，如果删除相对类，那么 div 就会向下落。
对于覆盖整个页面的模式，请在任何 relative div 之外使用位置 fixed 或 absolute，甚至更好 -> 使用用于“响应速度非常快”模式的 Flexbox

document.getElementById('modal-Opener').onclick = function() {
  document.querySelector('.modal').classList.add("modalOpen");
}

body,
html {
  height: 100%
}

.modal {
  border-radius: 20px;
  height: 100px;
  background-color: #dfdfdf;
  width: 60%;
  color: #000;
  padding: 20px;
  display: none;
  position: relative;
  justify-content: center;
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s align-items:center;
}

.modalOpen {
  display: flex;
}

.flex {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: center;
}

@-webkit-keyframes animatetop {
  from {
    top: -300px;
    opacity: 0
  }
  to {
    top: 0;
    opacity: 1
  }
}

@keyframes animatetop {
  from {
    top: -300px;
    opacity: 0
  }
  to {
    top: 0;
    opacity: 1
  }
}

<button id="modal-Opener">Open modal</button>
<div class='flex'>
  <div class='modal'>I am a modal</div>
</div>