javascript - 使元素位置相对于屏幕分辨率的 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
});