在“display: flex”的子元素中定位元素答案

【问题标题】：Position elements inside child of "display: flex"在“display: flex”的子元素中定位元素
【发布时间】：2018-02-01 03:27:30
【问题描述】：

我有一个网页，我分成几个部分，每个部分都有自己的内容。不幸的是，我需要它来响应，所以我给了 body 元素一个 display: flex 样式。 sect-1 和 sect-2 是 body 的子节点，所以它们按预期堆叠。问题是 flex 项目中的内容是绝对定位的，但是现在它不再从 sect-1 和 sect-2 定位，现在是整个页面。为什么绝对定位会忽略 flex 项的父项，我可以做些什么来定位 flex 对象的子项？

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);
}

【问题讨论】：

Flexbox 不能仅仅更改 position 属性。我建议您在代码中没有向我们展示某些内容...当您向我们展示...
它真的很简单。我会编辑我的问题。并不是我期望它改变位置，我需要将元素定位在 flex 对象（而不是容器）内
弹性项目不会绝对定位，除非你也告诉他们......我认为这是一个好主意......但这取决于你想要做什么。
仅 CSS 还不够，因为它不能证明问题所在。使用 flexbox 可以轻松居中，无需定位。
啊......但这不是你最初问的。您是否忘记在 flex-parent 上使用 position:relative 来提供定位上下文？

标签： css flexbox position parent-child absolute

【解决方案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>

【讨论】：

是的，哇，我忘了我从 flex 容器的子级中删除了 position: absolute，所以绝对定位是使用下一个非静态父级。谢谢