在 "display: flex" 的子元素内定位元素

Question

我有一个分成多个部分的网页，每个部分都有自己的内容。不幸的是我需要它来响应，所以我给 body 元素一个 display: flex 样式。 sect-1 和 sect-2 是 body 的子节点，因此正如预期的那样，它们正在堆叠。问题是 flex 项目中的内容是绝对定位的，但是现在它不再从 sect-1 和 sect-2 定位，现在是整个页面。为什么绝对定位会忽略 flex item parents，如何定位 flex objects 的 children？

HTML :

<body>
    <div id="sect-1">
        <h2 id="quote">I AM A WEB DESIGNER_</h2>
    </div>
</body>

容器css：

 body {
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

第一个 flex 对象：

#sect-1 {
    background: none;
    width: 100vw;
    height: 100vh;
    left: 0vw;
    z-index: 98;
}

我需要在 flex 对象（不是容器）中定位的对象：

#quote {
    align-content: left;
    font-family: Courier New;
    color: black;
    font-size: 25px;
    letter-spacing: 5px;
    line-height: 0px;
    width: 500px;
    position: absolute;
    top: calc(50vh - 12.5px);
    left: calc(50vw - 190px);
}

Answer 1

要让 quote 将自己定位在弹性项目 sect-1 内，sect-1 需要有一个不同于 static 的位置，通常是 relative就是一个用途。

body {
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

#sect-1 {
    position: relative;       /*  added  */
    background: none;
    width: 100vw;
    height: 100vh;
    left: 0vw;
    z-index: 98;
}

#quote {
    align-content: left;
    font-family: Courier New;
    color: black;
    font-size: 25px;
    letter-spacing: 5px;
    line-height: 0px;
    width: 500px;
    position: absolute;
    top: calc(50vh - 12.5px);
    left: calc(50vw - 190px);
}

<body>
    <div id="sect-1">
        <h2 id="quote">I AM A WEB DESIGNER_</h2>
    </div>
</body>

在 "display: flex" 的子元素内定位元素

Position elements inside child of "display: flex"

css

position

parent-child

absolute

flexbox