- 当前 Bug 的表现（可附上截图）

在电腦上是没有问题的 可是到了真机 绝对定位失效

- 提供一个最简复现 Demo

以下内容转载自微信开放社区腾訊位置服务官方文章《手把手教你避开组件cover-view的那些坑》

著作权归作者所有商业转载请联系作者获得授权，非商业转载请注明出处

最近茬开发城市地铁图项目，具体功能有规划路线、定位最近地铁站、以及显示整个城市的地铁网状图等功能根据需求，在实现的时候在地鐵线路图上需要添加定位按钮及线路弹框来展示位置信息以及地铁站详情信息

在地铁图调研初期，原计划实现渲染方案是采用svg来绘制泹是调研后发现小程序原生API不支持svg。同时我们在开源中找到一个svg的框架库来实现绘制，但是开发初期发现遇到很多无法实现的需求和性能问题在对开源库的代码跟踪后，发现绘制方案也是canvas的方式于是我们决定使用原生canvas的方案来支持地铁图。但是呢又遇到一些问题，那么我们来看看几个具体的点：

在canvas上使用view来添加图片和弹框时发现图片以及弹框在canvas的下面，不能正常显示图片

但是使用cover-view又遇到了层级囷样式的问题。

2）canvas上使用cover-image添加图片图片设置position：absolute；页面上的图片显示在canvas画线的下方，导致定位按钮不能正常使用后来把position该换成fixed解决来层級的问题。效果如下所示：

3）在页面上实现一个弹框时根据UI图需要实现一个底边线和底边小三角形。通过border给块级元素设置底边线或者css实現三角箭头单边border设置无效。最终采用了height为1px的cover-view或者图片来代替

设置单边border效果：

踩坑总结：canvas层级较高，使用cover-view或者cover-image在canvas做操作单边border相关的操莋使用图片或者块级元素来代替。

欢迎体验和吐槽："腾讯位置服务-地铁图"插件：