CSS 固定定位 - 绿叶网

CSS 固定定位简介

CSS 固定定位是一种布局定位技术。所谓的固定定位，指的是固定的元素不会随着浏览器滚动条的拖动而改变位置。

在 CSS 中，我们可以使用 position: fixed; 来实现固定定位。

语法：

position: fixed;
top: 数值;
bottom: 数值;
left: 数值;
right: 数值;

说明：

position: fixed; 是结合 top、bottom、left 和 right 这 4 个属性一起使用的。其中，position: fixed 会使得元素成为固定定位元素，接着使用 top、bottom、left 和 right 这 4 个属性来设置元素相对浏览器的位置。

注意:

top、bottom、left 和 right 这 4 个属性不一定全部都用到，一般只会用到其中两个（比如 top 和 left）。
top、bottom、left 和 right 这 4 个属性的取值，它们的参考对象是浏览器的 4 条边。

示例：使用 CSS 固定定位

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        * { 
            padding: 0;
            margin: 0;
        }
        #first {
            width: 150px;
            height: 1500px;
            border: 1px solid gray;
            line-height: 1000px;
            background-color: skyblue;
        }
        #second {
            position: fixed;         /* 设置元素为固定定位 */
            top: 50px;               /* 距离浏览器顶部 50px */
            left: 200px;             /* 距离浏览器左部 200px */
            width: 100px;
            height: 100px;
            border: 1px solid silver;
            background-color: hotpink;
        }
    </style>
</head>
<body>
    <div id="first">无定位的div元素</div>
    <div id="second">固定定位的div元素</div>
</body>
</html>

页面效果如下图所示。

CSS 固定定位示例

分析：

我们尝试拖动浏览器的滚动条，其中有固定定位的 div 元素不会有任何位置改变，但没有定位的 div 元素会改变，如下图所示。

拖动滚动条后效果

注意一下，我们在这里只使用了 top 和 left 属性来设置元素相对于浏览器顶边和左边的距离就可以准确定位该元素的位置了。top、bottom、left 和 right 这 4 个属性不必全部用到，大家稍微想一下就懂了。

CSS 固定定位的用途

CSS 固定定位在实际项目中应用非常广泛，它主要用于以下几种情况。

创建固定导航：固定定位可以让导航固定在顶部，以方便用户在滚动页面时始终可以访问到。比如绿叶网的顶部导航（如下图所示）。

CSS 固定定位创建固定导航

创建回顶部按钮：大多数网站都会有 “回到顶部” 这样的按钮，该效果就是使用固定定位来实现的。

创建悬浮元素：固定定位可以用于创建悬浮元素，例如悬浮广告、聊天窗口等。这些元素会始终出现在屏幕上，不会随着用户滚动页面而移动。

CSS 固定定位创建悬浮元素

最后需要说明一下，在使用 CSS 固定定位时，小伙伴们需要注意以下几点。

固定定位元素不会占据其父元素的空间。因此，需要使用其他元素来填充固定定位元素留下的空白。
固定定位元素可能会影响其他元素的位置，我们可以使用 z-index 属性来控制元素的层级。
虽然通常使用 top 和 left 来定位固定元素，但在某些情况下，我们也可以使用 right 和 bottom。例如，如果你希望元素固定在浏览器窗口的右下角，可以使用 position: fixed; right: 0; bottom: 0;。