时间戳

首页 > 解决方案 > 使模态填充整个父 div

html - 使模态填充整个父 div

问题描述

我试图让模态填充父 div，当我给它绝对位置和相对父位置时，它只是推动了其他元素，由于某种原因没有超过它们。尝试将高度设置为 100%，宽度相同，父标签是主标签，

我希望模态框从页眉到页脚打开，并获得一个 z-index，因此它是可点击的，其他元素留在它后面直到再次关闭且不显示

我如何让它超越其他元素？

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>

标签： htmlcss

解决方案

如果您所做的只是添加position: absolute;到一个元素，那还不会影响它将出现的位置。position: absolute;除非您指定相对于下一个定位的祖先的位置，否则它将简单地出现在它不应该出现的位置。

要指定（并使其完全拉伸），请添加位置：

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

推荐阅读