（ 直接往下拉有一些解决办法 ）
在写一个小程序的时候，想要把一个东西根据视口定位，但是发现 position: fixed;失效了，不思其解，百度了后了解到问题所在。
当固定元素的祖先的transform 属性非 none 时，定位容器的参照物将由视口改为该祖先。
很好理解吧，transform 属性非 none了那固定定位效果就跟绝对定位差不多，但是不会脱离文档流了，只有transform为none才可以正常使用固定定位，但是我倔，我就想即使用transform不为none，又想实现固定定位的效果，咋办？
有尝试网友说的给祖父元素之一加上transform：none，但是我试了不行……
还有网友说将具有transform属性的盒子设置display:inline-block;试了也不行……
问了chatGPT，给出下面一个解决方案，试了也不行……
找了一些资料，有三个可以实现固定定位效果的办法：
第一种：使用粘滞定位替代。粘滞定位不受transform属性影响，具体可以参考这位大佬的CSS fixed固定定位transofrm失效及居中小技巧
第二种，创建一个与带有transform属性的祖先元素平行的容器，在该容器中进行固定定位。这个相当于绕过transform，有些取巧。
想同时使用transform 属性非 none和固定定位的话，可以看看下面方法，实现思路就是通过监听固定元素的滚动高度，然后实时更改高度值，但是可能出现元素抖动的问题，实现代码如下：
HTML：
<div class="ZuFu">
<div class="Fu">
<div class="child"> 我是要进行固定定位的元素 </div>
</div>
</div>
JS：
window.addEventListener("scroll", fixChildPosition);
function fixChildPosition() {
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
var Fu = document.querySelector(".Fu");
var Child = document.querySelector(".child");
Fu.style.visibility = scrollTop > 0 ? "visible" : "hidden";
Child.style.top = `${scrollTop}px`;
}
CSS：
.ZuFu {position: relative;height: 10000px;background-color: cadetblue;color: aliceblue;transform: scale(1);}
.Fu {width: 100px;height: 100px;position: fixed;top: 100px;left: 100px;z-index: 10;
visibility: hidden;pointer-events: none;}
.child {width: 100px;height: 100px;position: absolute;top: 0;left: 0;visibility: visible;background-color: aqua;color: black;}
