CSS 是前端开发中重要的一部分，它可以让我们定义样式来美化网页并增加交互性。然而，有时候 CSS 样式可能会导致一些不必要的问题：
- 例如固定定位和粘性定位元素在页面滚动时可能会导致遮盖和混乱。
- 显示屏横长竖短，本来不大的显示屏长时间被占用了一部分。
此外，某些情况下，HTML 和其他元素的 overflow 属性被设置为隐藏，这可能会影响到页面的展示和用户体验。
本文将介绍一种方法来移除固定定位和粘性定位元素，并强制取消 HTML 和所有元素的 overflow 属性隐藏。
我们将使用 JavaScript 来实现这个功能，下面是具体的代码实现：
(function () {
// 移除固定定位和粘性定位元素
document.querySelectorAll('body *').forEach(function(node) {
if (['fixed', 'sticky'].includes(getComputedStyle(node).position)) {
node.parentNode.removeChild(node);
}
});
// 取消 HTML 和所有元素的 overflow 属性隐藏
document.querySelectorAll('html *').forEach(function(node) {
const s = getComputedStyle(node);
if ('hidden' === s['overflow']) { node.style['overflow'] = 'visible'; }
if ('hidden' === s['overflow-x']) { node.style['overflow-x'] = 'visible'; }
if ('hidden' === s['overflow-y']) { node.style['overflow-y'] = 'visible'; }
});
const htmlNode = document.querySelector('html');
htmlNode.style['overflow'] = 'visible';
htmlNode.style['overflow-x'] = 'visible';
htmlNode.style['overflow-y'] = 'visible';
})();
代码解释：
首先，我们使用 querySelectorAll() 方法来获取 body 中的所有元素，并使用 forEach() 方法来遍历它们。然后，我们检查每个元素的 position 属性是否为固定定位或粘性定位。如果是，我们将其从 DOM 中移除。
接下来，我们再次使用 querySelectorAll() 方法来获取 html 中的所有元素，并使用 forEach() 方法来遍历它们。然后，我们检查每个元素的 overflow 属性是否为隐藏。如果是，我们将其修改为可见。
最后，我们获取 html 元素，并将其 overflow、overflow-x 和 overflow-y 属性设置为可见。
注意📢：设置 overflow 的值并不能改变加了
important的overflow-x和overflow-y，所以需要单独设置。
在这里，我们使用了 IIFE 来封装代码，以便在页面加载时立即执行。
上面代码比较暴力，它的缺点就是：这可能会删除导航，但如果您需要它，只需点击刷新即可，所以上面代码不适合作为浏览器插件，而更应该作为小书签程序，添加流程如下：
如果你想了解这个技术可以参考这篇文章——网页收藏夹小技巧：bookmarklet 一个你不知道的技术
文章灵感来源：kill-sticky-headers
