vue+高德地图如何将按钮悬浮于地图层上

使用了element ui以及vue-amap，部分代码如下

 <el-amap
      vid="amapDemo"
      :amap-manager="amapManager"
      :events="events"
      :zoom="zoom"
      :center="center"
      class="amap-demo"
      pitch-enable="false"
    >

      <div id='container'>
      <div class="input-card" style='width: 18rem;' >
        <div class="input-item">
          <input type="radio" name='func' value='rule'><span class="input-text" style="font-size: small">距离测量</span>
          <input type="radio" name='func' value='measureArea'><span class="input-text" style="font-size: small">面积测量</span>
          <el-button type="primary" id="close" class="btn" value="清除" size="mini">清除</el-button>
        </div>
      </div>
      </div>

效果如下

如何让地图下方的三个功能放在一个窗体内悬浮于地图切换插件下方，如下图蓝色位置

MapView也是一种控件，我们只要使用相对布局方式，就能将按钮添加到地图之上来显示。

使用position进行定位，示例如下，把其中的数值修改为你自己的。

```css
position: absolute;
   top: 100px;
   right: 16px;
   height: 129px;
   width: 33px;

```

哈喽，外层用相对定位，里层按钮用绝对定位就可以了，看看我写的例子，有用请点采纳哦~

<template>
  <div id="app">
    <div class="amap-wrapper">
      <el-amap class="amap-box" :vid="'amap-vue'" />
      <div class="input-card" style="width: 18rem;">
        <div class="input-item">
          <input type="radio" name="func" value="rule"><span class="input-text" style="font-size: small">距离测量</span>
          <input type="radio" name="func" value="measureArea"><span class="input-text" style="font-size: small">面积测量</span>
          <el-button id="close" type="primary" class="btn" value="清除" size="mini">清除</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
    }
  }
}
</script>

<style>
.amap-wrapper {
  position:relative;
  width: 100%;
  height: 500px;
}
.input-card{
  position: absolute;
  right:0;
  top: 100px;
}
</style>