前端学习手册-position定位详解(六)

原创于 2025-08-21 16:48:11 发布 · 361 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #css

前端学习手册专栏收录该内容

18 篇文章

订阅专栏

一、什么是 position

position 是 CSS 中用于设置元素定位方式的属性。

它决定了一个元素如何在文档流中定位，是否脱离正常的文档流，是否参照其他元素进行偏移。

position 的五种取值包括：static、relative、absolute、fixed、sticky
了解这五种定位的异同，是深入掌握 CSS 布局的关键。

因为position是定位属性，所以要配合以下 4 个方位属性进行定位：top、right、bottom、left

二、如何定位

在页面中，定位布局是很常见的，能够定位到精准的位置。

比如：浮动菜单、头部导航、悬浮按钮、标题栏、分类导航等。下面的网页就用到了很多的定位。

1.static：默认定位

不需要手动设置，这是HTML 元素的默认定位方式。

处于文档流中，遵循标准的 HTML 布局规则。

2.relative：相对定位

相对定位是指元素相对于它在文档流中的原始位置进行偏移。设置后，该元素依然占据原来的空间。偏移不影响其他元素的位置。

top、right、bottom 和 left 属性进行微调。

3.absolute：绝对定位

元素脱离文档流，并根据最近的已定位父元素进行定位。不再占据空间。

若无定位父元素，则相对于 <html> 元素进行定位。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        width: 200px;
        height: 200px;
        background-color: #e98b8b;
      }
      .son {
        width: 100px;
        height: 100px;
        background-color: #8be98b;
        position: relative;
        top: 30px;
        left: 50px;
      }
    </style>
  </head>
  <body>
    <div class="box">
      我是父元素
      <div class="son">
        我是子元素
      </div>
    </div>
  </body>
</html>

4.fixed：固定定位

fixed 表示将元素固定浏览器窗口上的某个位置，无论页面如何滚动，元素都保持不动。

元素脱离文档流，不再占据空间。

常用于固定头部或底部栏、悬浮按钮。

5.sticky：粘性定位

一开始按照标准文档流进行定位，当滚动到指定位置时，如top：20px 变为固定定位。

sticky 是一个相对较新的定位方式，它结合了 relative 和 fixed 的特性。当元素在滚动中达到某个临界点时，会“粘”在某个位置。

比如：滚动吸顶的标题栏

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS Positioning Examples</title>
    <style>
      .fixed-example {
        position: fixed; /* 相对于浏览器窗口定位，无论如何滚动页面，始终停留在右侧 */
        bottom: 10%;
        right: 20px;
        height: 200px;
      }
      .fixed-example buttonbutton {
        text-align: center;
      }
      .sticky-example {
        padding: 10px 20px;
        background-color: #e33131; /* 青色背景 */
        position: sticky;
        top: 20px; /* 相对于其包含块定位 */
      }
      .sticky-example a {
        padding: 10px 20px;
        margin-right: 10px;
        font-size: 16px;
        font-weight: bold;
        color: #fff;
      }
      .content {
        padding-top: 500px;
        height: 1500px; /* 确保页面足够长以展示fixed和sticky效果 */
        background-color: #f0f0f0;
      }
    </style>
  </head>
  <body>
    <div class="content">
      <div class="sticky-example"><a href="#">这是导航1</a><a href="#">这是导航1</a><a href="#">这是导航1</a><a href="#">这是导航1</a></div>
      这里是页面内容
      <p>static：默认值，元素处于正常文档流中。
relative：相对定位，元素相对于自己原本的位置进行偏移。
absolute：绝对定位，元素脱离文档流，相对于最近的定位祖先进行定位。
fixed：固定定位，元素脱离文档流，相对于视口进行定位。
sticky：粘性定位，结合了 relative 和 fixed 的特性。</p>
    </div>
    <div class="fixed-example">
      <button><a href="#">为你推荐</a></button>
      <button><a href="#">客服</a></button>
      <button><a href="#">反馈</a></button>
    </div>
  </body>
</html>