将 html 元素定位在页面中的任意 x/y 坐标处答案

【问题标题】：Position an html element at any x/y coordinate in a page将 html 元素定位在页面中的任意 x/y 坐标处
【发布时间】：2021-12-14 02:02:31
【问题描述】：

给定 X 和 Y 坐标，我想定位一个元素，使其位于屏幕/窗口上的那个位置。

我希望滚动正常工作，因此固定位置不是解决方案。我想要 fix 的作用，但滚动时元素应该像普通元素一样移动。

无法保证父 html 元素的位置是什么。也就是说它可以是静态的、相对的、绝对的或固定的）。

我知道只有 css 的解决方案是不可能的，这没关系。

【问题讨论】：

添加一个解释你尝试过的代码的小提琴
Fiddle 始终是展示您迄今为止尝试过的作品的好选择。我会向你推荐这个。 jsfiddle.net
因此，您也希望使用当前滚动 x/y 位置来获得绝对位置元素。这或多或少应该只是其基本位置的一种情况，然后具有类似的类触发窗口滚动事件，该事件将使用滚动偏移量调整基本 x/y
+10k 浏览量.. 但没有解决方案？

标签： javascript html css

【解决方案1】：

相当于固定定位但有滚动的是position: absolute。它是相对于父位置的，只要它没有静态定位。

在 CSS 中：

#yourElement {
    position: absolute;
}

在带有 x 和 y 值的 JavaScript 中：

var element = document.getElementById("yourElement");
element.style.left = x + "px";
element.style.top = y + "px";

【讨论】：

我在问题中提到，父级可以是任何职位类型。
不幸的是，静态定位的元素会导致绝对定位的子节点使用最近的非静态祖先节点的边界。考虑到这一点，可以做出一些事情，但这真的没有必要。如果是这种情况，我建议简单地将父元素的定位设置为相对，并且在任何方向上都没有偏移。

【解决方案2】：

由于这个仍然是开放的，对 JS Fiddle 感到厌烦了......不确定我是否满足您想要的要求？

http://jsfiddle.net/9Lz58n3o/

示例页面

<div> 
    using this div as an example of large text / body contents... can be ignored        
</div>
<div class="myStaticPos" tmpleft="32" tmptop="32" style="left:32px; top:32px;"></div>
<div class="myStaticPos" tmpleft="123" tmptop="123" style="left:123px; top:123px;"></div>

CSS

.myStaticPos {
    position:absolute; 
    background-color:#d00; 
    width:32px; 
    height:32px;
}

Javascript

$(function() {
  $(window).scroll(function() {
      alignElements();
  });
});

function alignElements() {
    var scrollTop = $(window).scrollTop();
     $( ".myStaticPos" ).each(function() {
         $(this).offset({ top: scrollTop + parseInt($(this).attr("tmptop")), left: parseInt($(this).attr("tmpleft")) });       
    });    
}

上面的例子和小提琴链接是使用元素偏移的一种方法，无论滚动如何，它总是出现。否则绝对位置就是绝对位置。

如果这不符合您的需要或无法调整，请进一步验证问题。

【讨论】：

嗨，谢谢。但是，您将绝对位置设置为固定位置。我想要一些相似但不同的东西。我想定位为固定工作（即相对于 0,0/窗口/主体）但参与滚动。即当我滚动页面时，元素应该滚动 - 相对于页面左上角的绝对位置。
这只是相对于页面页面。？
也许你没有帮助 OP，但你确实帮助了我，谢谢！