如何使用 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 秒。

但是当使用visibility时，不像display: none，它们仍然占用正常的space所以大部分时间h3和gridelement之间有空白space，所以我想让三个元素重叠以最小化空白 space。我试过玩一些位置，这对 display flex 来说很棘手。对干净的东西有什么想法吗？谢谢！

附加问题：

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

谢谢！

Answer 1

我建议您将 max-height 属性与 visibility 一起使用，如下所示：

.overlay {
  max-height: 1000px;
}

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

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

How to make several elements overlap using display flex

html

css

css-position

flexbox

display