0

I would like to position an element absolute relative to a parent outside of an Angular component. But this does not work. I have the following structure:

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

I would like to have div2 to be positioned relative to div1 (and therefore not be affected by the padding-left) but this does not seem to work. It seems to be positioned relative to the angular component HTML tag.

Here is a Stackblitz link below showing this.

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

Does anyone know how I can position 'div2' relative to 'div1', with the Angular component tag in between them?

Cheers :)

Rogier de Ruijter
  • 636
  • 8
  • 16

2 Answers2

2

The problem is that you only specified position: absolute – and no values for any of the corners.

If you leave top, bottom, left and right all at their default value auto, then the element gets absolutely positioned, at the position it would already have in normal flow. And since an ancestor has 20px padding here, that normal flow position is 20px from the top left corner of the ancestor in both directions.

So specify top: 0; left: 0; as well for the absolutely positioned element - and it will be where you want it to be, in the top left corner.

04FS
  • 5,660
  • 2
  • 10
  • 21
1

if you not specify the top and the left attributes then the element will render like its not positioned absolute try the bellow:

 <div id="div2" style="position: absolute; top: 0; left: 0;">
      ...
 </div>
Christos Christou
  • 192
  • 4