如何使用 display flex 使多个元素重叠

Question

首先，我的代码：

    <main class="main">
      <h1 class="title">A title here</h1>
      <h2>Another Element Here <span id="subtitle"></span></h2>
      <h3 id="thirdtitle">h3 el here</h3>
      <div class="overlay" id="one">An alert message here!</div>
      <div class="overlay" id="two">
        Another alert message here
      </div>
      <div class="overlay" id="three">A third alert message here, relaunch? <span id="startappagain">Click me </span></div>
      <div id="gridelement" class="grid"></div>
    </main>

第一个问题：

我正在使用 display flex、flex-direction column 和 justify-content: center 和 align-items: center on main，我使用 JS 在 gridelement 上进行了一些交互，“一”、“二”和“三”是只是警报，因此它们的可见性设置为隐藏，有时，当在 gridelement 元素中与 JS 交互期间出现错误时，它们会变为可见 1 秒。

但是当使用可见性时，与 display: none 不同，它们仍然占用正常空间，因此 h3 和 gridelement 之间大部分时间都有空白空间，所以我想让三个元素重叠以最小化空白空间。我尝试过使用 display flex 比较棘手的位置。对干净的东西有什么想法吗？谢谢！

补充问题：

我也在考虑让消息与网格重叠，但由于我也在网格元素上使用了 flex，如果我将它们放在网格中，它只会弄乱网格元素元素的整个设计（尤其是最初 gridelement 中没有任何内容，一切都是在我的 JS 中创建的），知道如何让消息出现在屏幕中间吗？无论如何，他们会在那里停留一秒钟。

谢谢！

Answer 1

我建议您像这样使用max-height 属性和visibility：

.overlay {
  max-height: 1000px;
}

.overlay.hidden {
  max-height: 0;
  visibility: hidden;
}