CSS布局中如何让绝对定位可点击的点的位置不随屏幕大小变化而变化？

Question

<template>
  <view class="station">
    <!-- <collect></collect> -->
    <view class="container">
      <div style="text-align: center;">点击地图上站点可跳转至站点详情</div>
      <u-image src="/static/images/db.jpg" width="100%" height="auto" mode="widthFix" class="map">
      </u-image>
      <!-- 站点模拟点击区域 -->
      <view class="mzl" @click="test"></view>
      <view class="changchun" @click="goStation('长春')"></view>
      <view class="atl" @click="goStation('阿勒泰')"></view>
      <view class="yl" @click="goStation('伊犁')"></view>
      <view class="wlmq" @click="goStation('乌鲁木齐')"></view>
      <view class="ks" @click="goStation('喀什')"></view>
      <view class="bj" @click="goStation('北京')"></view>
      <view class="qd" @click="goStation('青岛')"></view>
      <view class="ls" @click="goStation('拉萨')"></view>
      <view class="sz" @click="goStation('苏州')"></view>
      <view class="xm" @click="goStation('厦门')"></view>
      <view class="xx" @click="goStation('新乡')"></view>
      <view class="xian" @click="goStation('西安')"></view>
      <view class="lz" @click="goStation('兰州')"></view>
      <view class="cq" @click="goStation('重庆')"></view>
      <view class="gz" @click="goStation('广州')"></view>
      <view class="gl" @click="goStation('桂林')"></view>
      <view class="km" @click="goStation('昆明')"></view>
      <view class="hk" @click="goStation('海口')"></view>
    </view>

    
    
  </view>
</template>

<script>
import collect from "@/components/collect/index.vue"
export default {
  components: {
    collect
  },
  data() {
    return {
      siteList: []
    };
  },
  created() {
    this.getStation()
  },

  methods: {
    test() {
      console.log('点击')
    },
    goStation(val) {
      console.log(val, '点击')
      let obj = this.siteList.find((item) => item.siteName === val);
      uni.navigateTo({
        url: `/pages/richText/station?id=${obj.siteId}&type=${obj.hjType}`,
      })

    },

  },

};
</script>

<style lang="scss" scoped>
.container {
  position: relative;
  width: 100%;
  height: auto;
}

.point {
  position: absolute;
  width: 20px;
  height: 20px;
  z-index: 2;
  background-color: red;
}

.text {
  text-indent: 20px;
  line-height: 35px;
}

.map {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

以上页面中 在地图上模拟了很多可以点击的点，但是随着设备屏幕大小变化之后 所有点的位置发生改变，想要把这些点的位置固定 不随着屏幕大小变化而变化 要怎么做

.station {
  padding: 10px;
}

.st {
  margin: 20px 0;

  span {
    display: inline-block;
    margin: 5px 10px;
  }

}

.mzl {
  @extend .point;
  top: 181rpx;
  right: 194rpx;
}

.changchun {
  @extend .point;
  top: 243rpx;
  right: 125rpx;
}

.atl {
  @extend .point;
  top: 203rpx;
  right: 466rpx;

}

.yl {
  @extend .point;
  top: 236rpx;
  right: 513rpx;
}

.wlmq {
  @extend .point;
  top: 278rpx;
  right: 472rpx;
  width: 30px;
  height: 10px
}

.ks {
  @extend .point;
  top: 267rpx;
  right: 588rpx;
}

.bj {
  @extend .point;
  top: 331rpx;
  right: 28%;
}

.qd {
  @extend .point;
  top: 370rpx;
  right: 14%;
  width: 40px;
  height: 10px;
}

.ls {
  @extend .point;
  top: 436rpx;
  width: 20px;
  right: 65%;
}

.sz {
  @extend .point;
  top: 436rpx;
  right: 160rpx;
}

.xm {
  @extend .point;
  top: 476rpx;
  right: 169rpx;
}

.xx {
  @extend .point;
  top: 380rpx;
  right: 230rpx;
}

.xian {
  @extend .point;
  top: 393rpx;
  right: 275rpx;
}

.lz {
  @extend .point;
  top: 370rpx;
  right: 326rpx;
}

.cq {
  @extend .point;
  top: 452rpx;
  right: 40%;
}

.gz {
  @extend .point;
  top: 513rpx;
  right: 223rpx
}

.gl {
  @extend .point;
  top: 513rpx;
  right: 272rpx
}

.km {
  @extend .point;
  top: 513rpx;
  right: 342rpx
}

.hk {
  @extend .point;
  top: 581rpx;
  right: 35%;
}
</style>

Answer 1

你的需求应该是在地图上覆盖一层可点击的区域，所以可点击区域应该始终和图片位置保持一致，需要将可点击区域和图片包裹一层父级 container , 两者相对于 container 定位

<div class="container">
    <image class="image"/>
    <view class="click-area-1 click-area">点击区域</view>
    <view class="click-area-2 click-area">点击区域</view>
</div>

<style>
.container {
    position: relative;
    width: 500px;
    height: 500px;
}
.image{
    width: 100%;
    height: 100%;
}

.click-area{
     position: absolute;
     z-index: 1
}
// 单独控制每个区域的具体位置
.click-area-1{
    top: xxpx
    left: xxpx
}
.click-area-2{
    top: xxpx
    left: xxpx
}



</style>

Answer 2

你把“rpx”换成百分比，然后用宽、高的百分比来控制地图的比例不变，再把点的大小调成相对值就行。

.container {
  position: relative;
  width: 100%;
  // 设一个固定的宽高比，比如地图的比例是 16:9。
  padding-bottom: 56.25%; // 16:9 = 56.25%
  height: 0;
  overflow: hidden;
}

.map {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.point {
  position: absolute;
  width: 2%; // 相对宽度
  height: 2%;
  z-index: 2;
  background-color: red;
}

.mzl {
  @extend .point;
  top: 25%;
  right: 27%;
}

.changchun {
  @extend .point;
  top: 33%;
  right: 17%;
}

.atl {
  @extend .point;
  top: 28%;
  right: 65%;
}