一种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');
}

最后，您可以在以下网址上看到这一点：http://pintool.azurewebsites.net/（点击右下方的图标查看标记）

我知道它要求很多，我只是希望那里有一些CSS大师，在我把头发拉出来之前，我可以指出正确的方向。

Answer 1

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

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

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

Answer 2

Yikes，使用严格的CSS和HTML将非常困难。我认为你需要使用JS来解决这个问题。 jQuery UI位置库非常便于查找标记位置：http://jqueryui.com/position/。

以下是一个想法：

我将每个＆＃34;关键字＆＃34;包裹起来在具有唯一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 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;
}