"position:absolute"没有被定位到第一个祖先元素，也没有遵循任何可观察的模式

Question

figma.com

我正在尝试创建一个类似于Figma中给出的原型的网站(链接到上面(。这是我使用的代码：

<div class="Tips" id="Tips">
<div id="TipsHeading"> Tips
</div>
<div class="rec2">
<img id="img1" src="personal.png">
<div id="WearMask"> Wear Mask </div>
</div>

CSS：

.Tips{background: #FFFFFF;
top: 1024px;}

#TipsHeading{position: absolute;
height: 66px;
top: 1053px;}
.rec2{position: absolute;
height: 369px;
top: 1192px;}
#WearMask{position: absolute;
top: 160px;}
#img1{position: absolute;
left: 24.85%;
right: 26.5%;
top: 49.36%;
bottom: 10.7%;
height: 278px;
width: 338px;}

我正在为两个"使用id属性；TipsHeading"；以及"；WearMask"；。然而，TipsHeading是页面顶部的wrt位置，并且WearMask被定位为wrt到.rec2。这对我来说没有意义。

这种情况已经发生了多次，对我来说调试代码变得非常困难，请帮忙。

Answer 1

以下是Mozilla开发人员对绝对位置的看法：

元素从正常文档流中删除，并且不创建任何空间>用于页面布局中的元素。它相对于其最近的>定位祖先(如有(；否则，它相对于初始>包含块。

position: absolute也像position: relative一样重新初始化其子级的位置。

在您的情况下，TipsHeading是基于其最近定位的祖先.Tips定位的，而#WearMask是基于其祖先.rec2的位置定位的

话虽如此，给所有元素一个绝对的位置会在css中造成很多混乱。尝试在使用flex、margin和padding时使用相对元素。

Answer 2

position: absolute中的元素相对于其第一个定位的祖先元素进行定位。