我有一个网页,我将其分为几个部分,每个部分都有自己的内容。不幸的是,我需要它具有响应性,所以我给body元素显示:伸缩样式。 sect-1和sect-2是人体的子代,因此它们按预期堆叠。问题是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);
}

最佳答案

为了使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>

10-05 20:28
查看更多