HTML не может обновить позицию элемента

Question

Я пытаюсь установить положение всех изображений, которые появляются на моей странице. Я пытался установить положение одного изображения с помощью DOM, но, похоже, это не дает никакого эффекта. Консоль распечатывает сообщение позиции обновления, но позиция изображения не обновляется. Я могу получить доступ к изображению через DOM, так как я могу обновить ширину изображений с помощью переменной элемента image. Я просто не могу обновить свою позицию.

HTML

<div *ngIf='this.imagesPerRow'>
  <div *ngFor="let image of images; let i = index; let last = last">
      {{last ? setPosition() : ''}}
    <img id={{i}} [style.width.%]="width" src={{image.src}} alt="">
  </div>
</div>

CSS

* {
  margin: 0;
  padding: 0;
  border: 0;
}

img {
  display: block;
}

машинопись

setPosition() {
  const image: HTMLElement = document.getElementById('1');

  if (image) {
    console.log("Updating position");
    image.style.left = "100px";
  }
}

Answer 1

css left свойство работает только на позиционированных элементах, как объяснено здесь

так что сменить стиль следует следующим образом

img {
  display: block;
  position: relative;
}