当由Angular组件包裹时，绝对位置不能正常工作

问题描述

我想将元素相对于Angular组件外部的父元素绝对放置。但这是行不通的。我有以下结构：

<div id="div1" style="position:relative; padding-left: 20px">
  <some-angular-component>
    <div id="div2" style="position: absolute">
      ...
    </div>
  </some-angular-component>
</div>

我希望将div2相对于div1定位（因此不受左填充的影响），但这似乎不起作用。它似乎相对于角度组件HTML标签定位。

这是下面显示的Stackblitz链接。

https://stackblitz.com/edit/angular-ivy-j3estd?file=src/app/hello.component.ts

有人知道我如何相对于“ div1”定位“ div2”，并在它们之间放置Angular组件标签吗？

干杯：）

解决方法

问题是您仅指定了position: absolute –且没有任何角的值。

如果将top，bottom，left和right全部保留为默认值auto，则元素将绝对定位在该位置它已经可以正常流动了。而且由于祖先在此处具有20px的填充，因此正常流位置在两个方向上均距祖先的左上角20px。

因此，还要为绝对定位的元素指定top: 0; left: 0;-它会位于左上角您想要的位置。

,

如果您未指定top和left属性，则该元素将呈现为未定位的绝对位置，请尝试以下操作：

 <div id="div2" style="position: absolute; top: 0; left: 0;">
      ...
 </div>