当我们需要在页面上固定一个元素，使它一直保持在屏幕顶部，无论滚动条如何滚动，这时候我们通常会使用 position: fixed 属性来实现。
实现原理
position: fixed 可以让元素相对于浏览器窗口固定位置，不随页面滚动而变化。但是如果仅仅使用该属性，元素将会固定在浏览器窗口的左上角，这显然不是我们想要的效果。
为了让元素固定在屏幕顶部，我们可以给元素设置 top: 0 和 left: 0 来指定它在浏览器窗口中的位置。此外，还需要考虑到元素可能会被遮挡住，因此需要设置 z-index 属性来控制元素的层级。
下面是一个示例代码：
.fixed {
position: fixed;
top: 0;
left: 0;
z-index: 9999;
}<div class="fixed">我是固定在顶部的内容</div>
注意事项
使用 position: fixed 属性有一些需要注意的事项：
- 元素会脱离文档流，因此不再占据原来的空间，对其他元素的布局可能会产生影响。
- 在一些老旧的浏览器中可能不支持该属性。
- 当页面滚动到元素下方时，元素可能会被遮挡住，需要设置
z-index属性来控制层级。
实际应用
紧贴屏幕顶部的固定元素在实际开发中非常常见，比如网站的导航栏、广告等等。下面是一个使用纯 CSS 实现固定导航栏的代码示例：
-- -------------------- ---- -------
---- --------------
----
------ --------------------
------ --------------------
------ --------------------
------ ----------------------
-----
------
-------
------ -
--------- ------
---- --
----- --
------ -----
----------------- -----
----------- - --- --- ------- -- -- -----
-------- -----
-
------ -- -
----------- -----
------- --
-------- --
-------- -----
---------------- --------------
------------ -------
-
------ -- -
------------- -----
-
--------以上代码中，我们将导航栏固定在屏幕顶部，并为其添加了一些基本样式和效果。通过这个例子，我们可以看到 position: fixed 的实际应用场景，同时也可以掌握如何使用该属性实现固定元素的效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/10872
