（ 直接往下拉有一些解決辦法 ）
在寫一個小程序的時候，想要把一個東西根據(jù)視口定位，但是發(fā)現(xiàn) position: fixed;失效了，不思其解，百度了后了解到問題所在。
當固定元素的祖先的transform 屬性非 none 時，定位容器的參照物將由視口改為該祖先。
很好理解吧，transform 屬性非 none了那固定定位效果就跟絕對定位差不多，但是不會脫離文檔流了，只有transform為none才可以正常使用固定定位，但是我倔，我就想即使用transform不為none，又想實現(xiàn)固定定位的效果，咋辦？
有嘗試網(wǎng)友說的給祖父元素之一加上transform：none，但是我試了不行……
還有網(wǎng)友說將具有transform屬性的盒子設置display:inline-block;試了也不行……
問了chatGPT，給出下面一個解決方案，試了也不行……
找了一些資料，有三個可以實現(xiàn)固定定位效果的辦法：
第一種：使用粘滯定位替代。粘滯定位不受transform屬性影響，具體可以參考這位大佬的CSS fixed固定定位transofrm失效及居中小技巧
第二種，創(chuàng)建一個與帶有transform屬性的祖先元素平行的容器，在該容器中進行固定定位。這個相當于繞過transform，有些取巧。
想同時使用transform 屬性非 none和固定定位的話，可以看看下面方法，實現(xiàn)思路就是通過監(jiān)聽固定元素的滾動高度，然后實時更改高度值，但是可能出現(xiàn)元素抖動的問題，實現(xiàn)代碼如下：
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;}
