网络上有很多关于此的信息,但我似乎真的找不到我的场景所需的任何确切答案 - 我基本上已经尝试了 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 大师可以在我拔出所有头发之前为我指明正确的方向。
最佳答案
哎呀,严格使用 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
});
关于javascript - 使元素位置相对于屏幕分辨率的 CSS(或 JavaScript)方式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25216721/