HTML 无法更新元素位置

Question

我正在尝试设置出现在我页面上的所有图像的位置。我试图通过DOM设置一张图片的位置，但似乎没有效果。控制台正在打印更新位置消息，但图像位置未更新。我可以通过 DOM 访问图像，因为我可以通过使用“图像”元素变量来更新图像宽度。我只是无法更新它的位置。

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;
}

typescript

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

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

Answer 1

css left 属性仅适用于 positioned 元素，如 here 所述

所以改变你的风格应该做到这一点

img {
  display: block;
  position: relative;
}