Question

我有一个网页，我将其分成几个部分，每个部分都有自己的内容。不幸的是我需要它来响应，所以我给了body元素一个显示：flex样式。 sect-1和sect-2是身体的孩子，所以他们正如预期的那样堆叠。问题是Flex项目内部的内容绝对定位，但现在它不再是从sect-1和sect-2定位，现在是整个页面。为什么绝对定位会忽略弹性项目父项，以及如何定位弹性对象的子项？

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>

将元素放在＆＃34;显示的子项内：flex＆＃34;

1 个答案: