Html 获取单击的当前DOM元素的绝对位置和大小

我用的是离子2

我想得到JS中被点击元素的绝对位置（div、img、ionslide等等）。例如，对于下面的代码，DELL XPS 13上的Chrome（桌面桌面）的绝对位置是

X=1525

和

Y=-163

。我不明白为什么我的图像上Y位置的值是负值。。。 此外，我没有找到一个好的完整的教程来学习如何在爱奥尼亚的JS中操作HTML/CSS，即使我找到了一些基础知识，比如修改背景颜色和其他CSS属性

谢谢你的帮助

HTML:

JS函数getPosition（e）：

CSS:

---

请你也添加Css代码和一把小提琴。完成了，我还没有为这个页面定义Css。谢谢@SurajRao，这很有帮助。但是，如何获得我单击的元素的绝对位置？你的链接给出了鼠标点击的绝对位置（用pageX，pageY），但我也想得到点击元素的绝对位置。再次感谢你的帮助！

<ion-content>
  <ion-slides class="image-slider" loop="true" slidesPerView="1">
    <ion-slide *ngFor="let img of pos">
      <img src="assets/imgs/{{ img.URL }}" class="thumb-img" (click)="position($event)">
    </ion-slide>
  </ion-slides>
</ion-content>

retrievePosition(e) {
  var el = e.currentTarget;
  var position = this.getPosition(el);
  alert(el.tagName + " : X = " + position.x + " ; Y = " + position.y);
}

getPosition(el) {
    var xPos = 0;
    var yPos = 0;

    while (el) {
      if (el.tagName == "BODY") {
        // deal with browser quirks with body/window/document and page scroll
        var xScroll = el.scrollLeft || document.documentElement.scrollLeft;
        var yScroll = el.scrollTop || document.documentElement.scrollTop;

        xPos += (el.offsetLeft - xScroll + el.clientLeft);
        yPos += (el.offsetTop - yScroll + el.clientTop);
      } else {
        // for all other non-BODY elements
        xPos += (el.offsetLeft - el.scrollLeft + el.clientLeft);
        yPos += (el.offsetTop - el.scrollTop + el.clientTop);
      }

      el = el.offsetParent;
    }
    return {
      x: xPos,
      y: yPos
    };
}

page-gallery {
    .header-item {
        background: transparent;
        border: none;
    }
}