当前位置: 首页 > 知识库问答 >
问题:

css3 - css中绝对定位如何不受设备分辨率影响始终定位在固定的点?

陈胤
2024-01-15

css 一个需求要在uniapp里面给一张图片设置很多可以点击的点,每个点有不同的点击事件
只能想到给图片一个相对定位,然后给每个点一个绝对定位,进行一点点的调整
但是手机分辨率改变之后,会有轻微的错位,top left的单位用的是百分比

求教有什么方法可以使得绝对定位不受分辨率的影响呢

<view class="map">      <u-image src="/static/images/st.jpg" width="95vw" height="50vh" mode="widthFix"> </u-image>    </view>    <!-- 站点模拟点击区域 -->    <view class="mh" @click="goStation(4)"></view>    <view class="bj" @click="goStation(4)"></view>    <view class="dh" @click="goStation(4)"></view>
.point {  position: absolute;  width: 20px;  height: 20px;  background-color: red;  z-index: 99999;}.map {  position: relative;  z-index: -1;}.mh {  @extend .point;  top: 6%;  right: 26%;}.bj {  @extend .point;  top: 6%;  right: 26%;}.dh {  @extend .point;  top: 6%;  right: 26%;}

共有1个答案

邓才
2024-01-15

既然你的容器用的是 vw/vh 这样的视口单位,那么你的定位时使用的单位也需要使用 vw/vh 这样的视口单位。

但是既然你只需要给图片设置可以点击的区域,可以考虑使用上古时代的 热点区域 <area> - HTML(超文本标记语言) | MDN

 类似资料:
  • 本文向大家介绍说说你对相对定位、绝对定位、固定定位的理解相关面试题,主要包含被问及说说你对相对定位、绝对定位、固定定位的理解时的应答技巧和注意事项,需要的朋友参考一下 https://www.w3schools.com/css/css_positioning.asp https://www.w3school.com.cn/cssref/pr_class_position.asp

  • 问题内容: 好的,我注意到了一些东西,但是在CSS规范中找不到。样式化元素将相对于浏览器视口绝对定位。如果将固定位置的元素放置在另一个元素内会怎样?CSS示例如下: 和HTML: 据我所知,该元素相对于其最近的父元素也是固定位置的。这在所有浏览器中都可以使用吗?另外,它是错误还是故意行为? 到目前为止,我在互联网上没有找到关于此主题的任何内容,只是“固定位置使其固定在页面上”。 问题答案: 固定和

  • 本文向大家介绍js中的如何定位固定层的位置,包括了js中的如何定位固定层的位置的使用技巧和注意事项,需要的朋友参考一下 需要获取一些HTML的对象的坐标来更灵活的设置目标层的坐标,这里可以通过用到document.body.scrollTop等属性,但是这些属性在xhtml的标准网页中或更简单的说就是带<!DOCTYPE...>的标签中得到的值是0;如果不要此标签则一切正常,那么在xhtml中如何

  • 问题内容: 这是我要完成的工作: 我需要一个按钮,该按钮与div的右侧保持一定距离,并且无论视口的大小如何,该按钮始终与div的侧面保持相同的距离,但是会随窗口滚动。 因此,始终是div右侧的x像素,而始终是视口顶部的y像素。 这可能吗? 问题答案: 水平放置固定元素(基于另一个元素) ( 免责声明 :此处提供的解决方案在技术上并非如问题标题所述为“绝对水平 ”,而是实现了OP最初想要的功能,固定

  • 问题内容: 根据W3Schools: 相对定位的元素通常用作绝对定位元素的容器块。 为什么是这样?有没有很好的例子? 问题答案: 一个很好的例子是当您想将某些内容放置到页面上或相对于容器/ div放置时。 这向您显示,如果绝对div不在“相对” div内,则内容将与文档主体对齐。 请注意,绿色div()的div内部()的对齐方式为的上/右对齐。 蓝色框()具有与绿色框()完全相同的HTML布局,但

  • 我是java swing gui的新手,我无法解决这个问题让我们假设我有一个Jframe大小100,100我有4个按钮位置 所有左顶部宽度高度大小从100,100缩放。 我需要使用绝对定位(因为我的真实情况不同的左,顶,宽,高),但响应性我考虑也许我可以使用因子来倍增左,右,宽,高值 编辑 我从不同的服务中得到左顶宽度高度,我的例子可以是这样的