textarea与Grammarly兼容性问题：滚动时图标重叠下方div

这个问题我之前处理过，Grammarly的那个G图标是通过注入绝对定位元素实现的，它默认会绑定到textarea的位置，但当页面滚动时，它的定位逻辑没跟上元素的滚动偏移，就会跑到下方的div区域里。给你几个实用的解决办法：

方法1：给textarea的父容器添加相对定位（最推荐） #

Grammarly的图标是基于目标元素的父级定位的，如果父元素没有设置position属性，它会往上找直到找到有定位的容器，甚至是整个文档。给每个包裹textarea的<td>加上position: relative;，就能把图标定位限制在当前单元格内，滚动时就不会乱跑了。

修改后的完整代码：

<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
</head> 
<body> 
    <div id="report" style="border: red solid thin"> 
        <table width="100%" cellpadding="5"> 
            <tr> 
                <td style="border:thin black solid; position: relative;"> 
                    <textarea rows="10" cols="80">TESTING AN ISSUE. WILL BE BACK ONLINE SHORTLY1</textarea> 
                </td> 
            </tr> 
            <tr> 
                <td style="border:thin black solid; position: relative;"> 
                    <textarea rows="10" cols="80">TESTING AN ISSUE. WILL BE BACK ONLINE SHORTLY2</textarea> 
                </td> 
            </tr> 
            <tr> 
                <td style="border:thin black solid; position: relative;"> 
                    <textarea rows="10" cols="80">TESTING AN ISSUE. WILL BE BACK ONLINE SHORTLY3</textarea> 
                </td> 
            </tr> 
            <tr> 
                <td style="border:thin black solid; position: relative;"> 
                    <textarea rows="10" cols="80">TESTING AN ISSUE. WILL BE BACK ONLINE SHORTLY4</textarea> 
                </td> 
            </tr> 
        </table> 
    </div> 
    <div id="menu" style="text-align: center; border: thin blue solid; "> 
        Test<br/> Test<br/> Test<br/> Test<br/> Test<br/> Test<br/> Test<br/> Test<br/> Test<br/> 
    </div> 
</body> 
</html>

方法2：调整元素层级避免重叠 #

如果不想修改定位逻辑，也可以通过z-index控制层级，让下方的menu不会被Grammarly图标覆盖。给#report设置z-index: 1;，#menu设置z-index: 0;，这样即使图标错位，也会被report容器遮挡，不会出现在menu区域：

#report {
    position: relative;
    z-index: 1;
}
#menu {
    z-index: 0;
}

不过这个方法只是视觉上解决重叠，并没有修复图标定位的问题，适合临时应急。

方法3：禁用当前页面的Grammarly检测（如果不需要的话） #

如果这只是测试页面，不需要Grammarly的语法检查功能，可以给textarea加上data-gramm="false"属性，让Grammarly跳过这些元素，自然就不会出现图标了：

<textarea rows="10" cols="80" data-gramm="false">TESTING AN ISSUE. WILL BE BACK ONLINE SHORTLY1</textarea>

内容的提问来源于stack exchange，提问作者haverer