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

Question

网上有很多关于这方面的信息，但我似乎真的找不到我的场景所需的任何确切答案 - 我基本上已经尝试了我的 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 大师可以在我拔掉所有头发之前为我指出正确的方向。

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

Answer 2

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

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

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

Answer 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>

警告未经测试，只是概念

Answer 4

这是你的问题：

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