Google Sites中Messenger式悬浮Widget固定位置问题求助

问题核心是你用了position: absolute，这个定位是相对于最近的已定位父元素（而非浏览器视口），所以Widget只会固定在所在区块的底部，页面滚动时不会跟着视口移动。要实现类似Facebook Messenger的悬浮效果，只需把定位属性改成position: fixed——它是相对于浏览器视口定位的，滚动时会始终保持在指定位置。

修改后的代码如下：

<html>
<style>
.UtePc #pingpilot{
  display: none;
  position: fixed; /* 关键修改：替换absolute为fixed */
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: #660000;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}
</style>
<body>
<script id="pingpilot" type="text/javascript" src="https://widget.pingpilot.com/widget-button.js" data-signal="483c60" async></script>
</body>
</html>

补充说明：

• position: fixed元素会脱离正常文档流，始终绑定浏览器视口，无论页面如何滚动，都会维持设置的bottom和right位置。
• 如果修改后仍有异常，检查Google Sites的容器区块是否设置了overflow: hidden属性，这类属性可能会遮挡fixed定位的元素，可尝试提高Widget的z-index值（比如设为999）来确保它显示在最上层。

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