使模式填充整个父div

Question

我试图让一个模式填充父div，当我给它绝对位置和它的父位置相对时，它只是推送其他元素，而不是出于某种原因去遍历它们。尝试将高度设置为100%，宽度设置相同，父标记是主标记，

我希望模式从页眉打开到页脚，并获得一个z索引，以便它是可单击的，其他元素留在它后面，直到再次关闭并显示无

我如何让它遍历其他元素？

​

body {
  width: 100vw;
  height: 100vh;
  text-align: center;
  display: flex;
  flex-direction: column;
  margin: 0;
  font-family: sans-light;
}

.upload-modal {
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 1001;
}

main {
  flex: auto;
  background-color: #f3f0ec;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
}

<nav>
  <div class="logo"></div>
  <section class="user-options">
    <a href="" class="sign-up">Sign Up</a>
    <a href="" class="login">Login</a>
  </section>
</nav>
<header>
  <h1>Meme Generator</h1>
  <p>Create a meme from JPG, GIF or PNG images. Edit your image and make a meme. </p>
</header>
<main>
  <section class="upload">
    <div class="upload-btn-wrapper">
      <button class="btn">Upload a file</button>
      <input type="file" name="myfile" />
    </div>
    <p>Or</p>
  </section>
  <button class="meme-template">
                Select meme template 
            </button>

  <section class="meme-template-modal hide">
    <div class="images-container">
    </div>
  </section>
  <section class="upload-modal hide">
    <div class="user-panel">
      <h2>Meme editor</h2>
      <section class="user-controls">
        <button> Add Text</button>
        <button> Add Image</button>
        <button class="generate">Generate meme</button>
      </section>
    </div>
    <canvas></canvas>
  </section>
</main>

​

Answer 1

如果您所做的只是将position: absolute;添加到一个元素中，那么这还不会影响它将出现的位置。它只会出现在没有position: absolute;的地方，除非您指定相对于下一个定位的祖先放置它的位置。

要指定该位置(并使其完全拉伸)，请添加以下位置：

.upload-modal {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1001;
}