我有一个网页,我将其分为几个部分,每个部分都有自己的内容。不幸的是,我需要它具有响应性,所以我给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>