鼠标悬停图片变大导致页面下移的解决方法

<template>
  <div @mousemove="updateMousePosition">
    <div id="map-container"></div>
  </div>
</template>
<script>
import { Scene, PointLayer,Marker } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
export default {
data() {
  return {
showNewBoxFlag: false,
mouseX: 0,
mouseY: 0
  }
},
mounted() {
  // 组件挂载后初始化地图
  this.initMap();
},
methods: {
updateMousePosition(event) {
  this.mouseX = event.pageX;
  this.mouseY = event.pageY;
},
initMap() {
  const mapContainer = document.getElementById('map-container');
  // 创建地图实例
  const scene = new Scene({ id: mapContainer, map: new GaodeMap({ style: 'dark', center: [90.25, 35.39257], // 替换为具体的经度和纬度值 pitch: 35.210526315789465, zoom: 10 }) })
  const position = [90.25, 35.39257];
  // 创建一个自定义 DOM 元素作为 Marker
  const markerContainer = document.createElement('div');
  markerContainer.style.width = '64px';
  markerContainer.style.height = '64px';
  markerContainer.style.backgroundImage = 'url(/windsvg/风机.svg)';
  markerContainer.className = 'custom-marker';
  // 将自定义 DOM 添加到 Marker 上
  const customMarker = new Marker({ element: markerContainer, }) .setLnglat(position);
  // 添加自定义 Marker 到地图
  scene.addMarker(customMarker);
  scene.render();
},
}
};
</script>
<style>
.amap-container {
  width: 97% !important;
  height: 97% !important;
  margin-left: 1.7%;
  margin-top: 1.2%;
}
.l7-control-logo {
  display: none;
}
.custom-marker {
  background-size: 100% 100%;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.2s;
}
.custom-marker:hover {
  transform: scale(2) !important;
}
</style>
<p>在代码中，当鼠标进入图片时，通过设置<code>.custom-marker:hover</code>的<code>transform</code>属性为<code>scale(2)</code>来实现图片变大的效果。但是，由于变大后图片的大小增加了，可能导致图片所在的容器高度不够，从而导致容器下方的内容被顶下来，出现位移的情况。</p>
<p>要解决这个问题，你可以尝试以下几个方法：</p>
<ol>
<li>
<p>调整容器的高度，使其能够容纳变大后的图片。可以通过设置容器的<code>min-height</code>属性来实现。</p>
</li>
<li>
<p>使用<code>position: absolute</code>将图片从正常的文档流中脱离出来，这样变大后的图片就不会影响其他元素的位置。可以将<code>.custom-marker</code>的样式修改为：</p>
</li>
</ol>
<pre><code class="language-css">.custom-marker {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 其他样式... */
}
</code></pre>
<ol start="3">
<li>使用<code>transform-origin</code>属性来调整变换的原点，使图片变大时保持在原来的位置。可以将<code>.custom-marker</code>的样式修改为：</li>
</ol>
<pre><code class="language-css">.custom-marker {
  /* 其他样式... */
  transform-origin: center;
}
</code></pre>
<p>你可以尝试以上方法，根据你的需求选择适合的解决方案。</p>