前端世界里有很多看似“直白”的属性，比如 position: sticky，听起来像是“粘住某个位置”——只要设置好就能吸附在页面某个位置上，滚动时一动不动。

结果实际开发中你可能经历过以下崩溃三连：

• 设置了 position: sticky; top: 0;，元素依然随页面滚动；
• 控制台一切正常，CSS 正确无误，就是不生效；

“返回顶部” 功能如今已经并不多见，但该技术可用于很好地学习两个现代 CSS 特性：

• position: sticky

一、什么是css margin塌陷

CSS中的margin塌陷（也称为margin collapsing）是一个常见的布局问题，主要发生在垂直方向上。当两个或多个元素的垂直margin相遇时，它们不会按照预期叠加，而是会发生重叠，导致最终的外边距值比单独设置时小。

二、margin塌陷的原因

你是否见过那些丝滑的全屏滚动网站，每次滑动都精准对齐，仿佛被"磁铁"吸住一般？以前实现这种效果需要加载庞大的JS库，写几十行代码，而现在，3行CSS就能搞定

大家好，很高兴又见面了，我是"高级前端进阶

概念：

• Box:Box 是 CSS 布局的对象和基本单位，一个页面是由很多个 Box 组成的，这个 Box 就是我们常说的盒模型

1、滚动条隐藏

背景/场景：在移动端，滑动的时候，会显示默认滚动条，如图1:

//隐藏代码：  /*隐藏滚轮*/
.ul-scrool-box::-webkit-scrollbar,
.ul-scrool-box ul::-webkit-scrollbar {
  display: none;
}