元素设置positon：absolute后被其他元素遮挡解决方式

在项目开发过程种，发现使用ant-design-vue的折叠面板加表格的时候，我需要在第一行的第一个单元格右上角显示一个图标，最简单的方式肯定就是通过绝对定位实现。

但是当我设置了top：-10px后发现，图标的一部分被表头的单元格给挡住了。

解决方式：使用position：fixed+transform: translate(x,y)，position：fixed可以将元素提到最高层级，使用transform: translate(x,y)位移对元素进行定位

但这种方式又会出现另一个问题，当表格向下滚动的时候，图标会一直固定在那个位置，我们需要的是只显示在第一列的上方

解决方案：监听ant-table-body的滚动事件，当表格向下滚动的时候，设置图标元素的visibility属性为hidden，向上滚动到第一行显示后visibility属性为visible。使用ant-table-body的scrollTop（容器到顶部的距离）属性判断滚动位置

const tableRef = ref(null)
const handleScroll = (e: Event) => {
  if (tableRef.value) {
    const tableBody = (tableRef.value[0] as ComponentPublicInstance).$el.querySelector(
      '.ant-table-body'
    )
    const icon = document.getElementById('icon')
    if (tableBody.scrollTop > 10) {
      ;(icon ?.style as CSSStyleDeclaration).visibility = 'hidden'
    } else {
      ;(icon ?.style as CSSStyleDeclaration).visibility = 'visible '
    }
  }
}

onMounted(async () => {
  await nextTick()
  if (tableRef.value) {
    const tableBody = (tableRef.value[0] as ComponentPublicInstance).$el.querySelector(
      '.ant-table-body'
    )
    tableBody.addEventListener('scroll', handleScroll)
  }
})