CSS属性详解——position:fixed

最新推荐文章于 2025-03-13 12:49:02 发布

我糖呢

最新推荐文章于 2025-03-13 12:49:02 发布

阅读量1.2w

点赞数 7

分类专栏： css 文章标签： css 前端 html

本文链接：https://blog.csdn.net/Wod_7/article/details/131038643

版权

css 专栏收录该内容

11 篇文章

订阅专栏

什么是固定定位？

CSS中的固定定位fixed定位是一种定位方式，使元素相对于浏览器窗口固定位置，换句话说，固定定位的元素会脱离文档流，始终停留在浏览器窗口的某个位置不动，即使用户上下滚动页面也不会改变其位置。

实现过程

在CSS中使用固定定位fixed定位，需要设置元素的position为fixed，并使用top、left、bottom、right这四个属性来指定元素相对于浏览器窗口的位置。四个属性中，top和left属性决定了元素的左上角的位置，bottom和right属性决定了元素的右下角的位置。

固定定位通常用于页面头部的导航菜单、广告栏、页面返回按钮等元素的定位，使这些元素始终展示在用户浏览器窗口的可视区域内。

示例代码

下面是一个使用CSS固定定位fixed定位的例子。这个例子是创建一个位于页面顶部的导航菜单。

<!DOCTYPE html>
<html>
<head>
  <title>使用CSS固定定位fixed定位</title>
  <style>
    /* 定义导航菜单 */
    .menu {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      background-color: #4CAF50;
      color: white;
      padding: 10px;
    }
  </style>
</head>
<body>
  <div class="menu">
    <ul>
      <li><a href="#">首页</a></li>
      <li><a href="#">关于我们</a></li>
      <li><a href="#">联系我们</a></li>
    </ul>
  </div>
  <p>这是网页内容，可通过滚动查看</p>
</body>
</html>