使元素位置相对于屏幕分辨率的 CSS（或 JavaScript）方法

Posted 2023-04-14

【中文标题】使元素位置相对于屏幕分辨率的 CSS（或 JavaScript）方法

【英文标题】：A CSS (or JavaScript) way of making an elements position relative to the screen resolution

【发布时间】：2014-10-02 17:08:05

【问题描述】：

网上有很多关于这方面的信息，但我似乎真的找不到我的场景所需的任何确切答案 - 我基本上已经尝试了我的 CSS 的每一种组合'已在教程中找到，但没有任何效果。

这是我所面临的一些屏幕截图（注意标记）：

全分辨率 (1080p)：

缩小浏览器窗口：（平板电脑）

您可以看到标记无处不在。我希望这些保持相对，因此即使页面分辨率发生变化，“标记”也应保持在“伟大”一词之上。

这是我的 CSS，请注意，我尝试将叠加层设置为 position: absolute，将引脚设置为相对定位。我尝试将顶部和左侧的值设置为标记的百分比，但我似乎无法正常工作。

.overlay 
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 9997;
  background-color: rgba(0,0,0,0.5);
  display: none;


.overlay-inner 
    width: 100%;
    height: 100%;
    position: absolute;


.pp_pin_dropped 
    width: 48px; // tried as percentages, position: absolute is set on the elements in JQuery - will be moved to CSS
    height: 48px;
    z-index: 9998;
    cursor: pointer;
    background-image: url('/Images/pin_dropped.png');

最后，您可以在以下 URL 上看到：http://pintool.azurewebsites.net/（点击右下角图标查看标记）

我知道这要求很多，我只是希望有一些 CSS 大师可以在我拔掉所有头发之前为我指出正确的方向。

【问题讨论】：

据我所知，固定位置不适用于平板电脑和手机

我很乐意将其更改为真正需要的任何内容 - 当然，这种情况必须有答案并且其他人已经实现了吗？

【参考方案1】：

哎呀，这将很难使用严格的 CSS 和 html 来实现。我认为您将需要使用 JS 来实现这种行为。 jQuery UI 位置库将非常方便地找到您的标记位置：http://jqueryui.com/position/。

这里有一个想法：

我会将页面上的每个“关键字”包装在具有唯一 ID 的跨度中。例如：

<div>some text here <span id="pos">pos</span></div>
<img src="marker.png" id="pos_marker"/>

然后在调整窗口大小时，重新定位您的图像：

$( window ).resize(function() 
  $("#pos_marker").position(my: "bottom center", at: "top center", of: "#pos");
  // and so on
);

【讨论】：

谢谢你的这个和代码sn-ps，我想我必须在浏览器调整大小时对元素的定位做点什么（不幸的是）。困难的部分是我正在尝试制作一个独立的插件，而不依赖于 jQuery 以外的任何东西——但这绝对给了我一个起点。

听起来很有趣！我可以想象您将您的插件传递给图像-> 标记对的配置对象。例如， var $markers = $.markers( '#pos_marker': '#pos', ... );在引擎盖下，您处理事件绑定和定位。也许您提供了一个外部 api 来控制它们何时显示/隐藏：$markers.show();

【参考方案2】：

您可以使用 span 标签包装目标单词或字符，然后使用 jQuery（或 javascript）在页面上定位它们。

也许这个问题也会有帮助：jQuery x y document coordinates of DOM object

当您找到特定的单词时，只需使用 javascript 重新定位引脚。并且不要忘记在调整窗口大小时重新定位引脚。

【讨论】：

听起来像这样和其他答案在同一件事上 - 我认为它必须基于 JavaScript - 谢谢！

【参考方案3】：

我认为您可以将它们视为类似于工具提示的处理方式，将图钉直接嵌入为元素，如

<span data-content="Great" class="pin"></span>

然后使用javascript根据元素位置显示图标，并在调整窗口大小时重新绘制。

<script>
    function drawpins() 
         $(".pin").each(function()
             pos = this.position()

             pin = this.data("content");
             pin += '<img src="tooltip.jpg"'
             pin += 'style="position:absolute;'
             pin += 'top:' + pos.y + ';'
             pin += 'left:'+ pos.x + ';'
             this.html(pin)
         )
    

    $(window).resize(drawpins())
</script>

警告未经测试，只是概念

【讨论】：

感谢您 - 再次与其他 2 个答案的概念相同，我感谢您的代码 sn-p，我会试一试！

【参考方案4】：

这是你的问题：

element.style 
left: 872px;
position: absolute;
top: 154px;

【讨论】：

我也尝试将其更改为百分比，但结果仍然相同。这可能是问题所在，但有解决方案吗？