固定定位社交分享栏导致页面正文文本链接无法点击是什么原因

问题原因 #

你给.socialfloat设置了width: 100%和极高的z-index: 9999，虽然只有左侧的50px区域显示了社交图标，但整个.socialfloat容器实际是横跨整个页面宽度的透明层，高度等于四个社交按钮堆叠的总高度。当页面滚动到正文链接和这个透明层垂直范围重叠时，点击事件会被层级更高的透明容器拦截，自然就点不到下层的文本链接了。

修复方案 #

有两种常用的修复方式，任选其一即可：

方案1：限制容器宽度 #

将.socialfloat的宽度改为仅容纳按钮的尺寸，避免整行占位：

.socialfloat {
  /* 原有其他属性保留，仅修改width */
  width: 50px; /* 也可替换为width: fit-content; 自适应内容宽度 */
}

方案2：配置点击事件穿透 #

如果需要保留100%宽度的容器，可以通过pointer-events属性让透明区域不拦截点击：

.socialfloat {
  /* 原有其他属性保留，新增以下属性 */
  pointer-events: none;
}
.socialfloat .fbtn {
  /* 原有其他属性保留，新增以下属性，保证按钮本身可正常点击 */
  pointer-events: auto;
}

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