当被 Angular 组件包裹时，绝对位置无法正常工作

Question

我想在 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 定位（因此不受 padding-left 的影响）但这似乎不起作用。它似乎是相对于 angular 组件 HTML 标记定位的。

下面是 Stackblitz link 显示的内容。

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

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

干杯:)

Answer 1

问题是你只指定了position: absolute——没有任何角的值。

如果将 top、bottom、left 和 right 全部保留为默认值 auto，则元素将绝对定位，位于它在正常流程中已经拥有的位置。由于祖先在这里有 20px 的填充，所以正常的流动位置是从祖先的左上角在两个方向上的 20px。

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

Answer 2

如果您没有指定 top 和 left 属性，那么该元素将像其未定位绝对一样呈现，请尝试以下操作：

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

当被 Angular 组件包裹时，绝对位置无法正常工作

Position absolute not working correctly when wrapped by an Angular component

css

absolute

angular