18910140161

JavaScript-如何用相对位置将绝对元素定位在主体的特定坐标中?-堆栈溢出

顺晟科技

2022-10-19 14:08:56

44

我有一个元素,我正在检查它的click事件。当它单击时,我希望根据事件的坐标添加一个div元素。代码如下:

$('.quick-popup-icon').click(function (e) {

  var popup = document.createElement("div")
  popup.style.top = e.pageY + "px"
  popup.style.marginLeft = e.pageX  + "px"
  popup.style.position = "absolute"

  document.body.append(popup)
}

当身体位置不是相对的时,它工作得很好,元素在精确的坐标中添加。但是当我们的身体有一个相对的位置,我们需要滚动时,一切都分崩离析了。因为我们的应用程序是一个Chrome扩展,所以我不能改变主体的位置。 下面是我的具体问题:如何在获取事件坐标时,将文档中具有绝对位置的元素追加到具有相对位置的元素。


顺晟科技:

我想你在找这个。祝你好运

当主体是时,所有东西都分崩离析的原因是相对或绝对位置的父元素中的绝对元素受到父元素位置的影响。

例如,如果相对div在主体左侧200px,在主体顶部500px,并且在该相对div内部有一个带and的绝对div,则绝对div将在父div的顶部和左侧相差0px。下面是一个示例:

但是,在相同的情况下,如果我们要使子级具有固定的位置,top:0和left:0将使其位于页面的左上角。

示例:

基本上,只要弹出即可。


编辑 如果看不到div,向fixed元素添加z-index会有所帮助。

让我知道如果有什么事情不像你想要的那样工作,这样我们就可以一起解决这个问题。代码目录中的解释。

  • TAG:
相关文章
我们已经准备好了,你呢?
2024我们与您携手共赢,为您的企业形象保驾护航