CSS 定位

网站

CSS position 属性

position | MDN

引入

网页中的元素默认会按照CSS 文档流排列。

但有些时候，我们需要把元素放到更具体的位置，例如卡片角标、固定导航栏、返回顶部按钮，这时就需要 CSS 定位。

正文

定义

定义

CSS 定位用于控制元素在页面中的具体位置，常通过 position 配合 top、right、bottom、left 使用。

定位解决的是：元素不仅要正常排列，还要能根据某个参考点进行位置调整。

常见定位值包括：

• static
• relative
• absolute
• fixed
• sticky

基础语法

选择器 {
  position: 定位方式;
  top: 距离;
  right: 距离;
  bottom: 距离;
  left: 距离;
}

例如：

.box {
  position: relative;
  top: 20px;
  left: 10px;
}

这里 .box 会相对自己原来的位置，向下移动 20px，向右移动 10px。

常见属性

属性	作用
position	设置元素的定位方式
top	设置元素距离参考位置顶部的距离
right	设置元素距离参考位置右侧的距离
bottom	设置元素距离参考位置底部的距离
left	设置元素距离参考位置左侧的距离
z-index	控制定位元素的层叠顺序

top、right、bottom、left 只有在元素设置了非默认定位时才更常用。

如果元素还是 position: static;，这些偏移属性通常不会生效。

定位方式对照表

值	是否脱离文档流	参考位置	常见用途
static	否	文档流默认位置	默认布局
relative	否	自己原来的位置	小幅偏移、作为绝对定位参考
absolute	是	最近的非 static 祖先元素	角标、弹层、图标定位
fixed	是	浏览器视口	固定导航、返回顶部按钮
sticky	否到类似固定	滚动容器和原位置	吸顶标题、粘性导航

static

static 是默认定位方式。

.box {
  position: static;
}

元素会按照文档流正常排列。

这种情况下，设置 top、right、bottom、left 通常不会改变元素位置。

.box {
  position: static;
  top: 20px;
}

上面这种写法里，top: 20px; 通常不会生效。

relative

relative 表示相对定位。

元素会相对自己原来的位置发生偏移。

<div class="box">普通盒子</div>
<div class="box move">移动后的盒子</div>
<div class="box">普通盒子</div>

.box {
  padding: 16px;
  margin-bottom: 8px;
  background-color: #e5e7eb;
}
 
.move {
  position: relative;
  top: 12px;
  left: 20px;
}

.move 看起来会向下、向右移动。

但是它原来在文档流中的位置还会保留，后面的元素不会自动填上它原来的位置。

relative 常见用途：

• 让元素在原位置基础上轻微移动
• 作为子元素 position: absolute; 的定位参考
• 配合 z-index 调整层级

absolute

absolute 表示绝对定位。

绝对定位元素通常会脱离文档流。

<div class="card">
  <span class="badge">推荐</span>
  <h3>文章标题</h3>
  <p>文章说明文字</p>
</div>

.card {
  position: relative;
  padding: 24px;
  border: 1px solid #d1d5db;
}
 
.badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background-color: #ef4444;
  color: white;
}

这里 .badge 会定位到 .card 的右上角。

关键点是 .card 设置了 position: relative;。

这样 .badge 的 top 和 right 就会以 .card 为参考。

如果父级没有设置非 static 定位，绝对定位元素会继续往上找祖先元素，直到找到合适的定位参考。

绝对定位的参考点

position: absolute; 的参考位置不是一定看父元素。

它会寻找最近的、position 不是 static 的祖先元素。

<div class="outer">
  <div class="inner">
    <span class="dot"></span>
  </div>
</div>

.outer {
  position: relative;
}
 
.dot {
  position: absolute;
  top: 0;
  right: 0;
}

如果 .inner 没有设置 position，.dot 就会以 .outer 为参考。

所以实际写绝对定位时，经常会给父元素加：

.parent {
  position: relative;
}

这是一种很常见的写法。

fixed

fixed 表示固定定位。

元素会相对于浏览器视口定位，不会随着页面滚动而离开指定位置。

<button class="back-top">返回顶部</button>

.back-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
}

这个按钮会固定在浏览器右下角。

页面滚动时，它仍然停留在同一个位置。

fixed 常见用途：

• 固定顶部导航栏
• 返回顶部按钮
• 悬浮客服按钮
• 固定提示条

sticky

sticky 表示粘性定位。

它可以理解为 relative 和 fixed 的结合。

元素一开始在文档流中正常显示，滚动到指定位置后，会像固定定位一样停住。

<h2 class="section-title">章节标题</h2>
<p>很多内容...</p>

.section-title {
  position: sticky;
  top: 0;
  background-color: white;
}

当 .section-title 滚动到距离顶部 0 的位置时，就会吸附在顶部。

sticky 常见用途：

• 吸顶导航
• 表格表头固定
• 文章小标题吸附
• 分组列表标题

使用 sticky 时，通常必须设置 top、bottom、left 或 right 中的一个，否则不容易看到效果。

z-index

z-index 用于控制元素的层叠顺序。

当多个元素重叠时，z-index 更大的元素通常显示在上面。

.modal {
  position: fixed;
  z-index: 1000;
}
 
.header {
  position: fixed;
  z-index: 100;
}

这里 .modal 的 z-index 比 .header 大，所以弹窗通常会显示在导航栏上面。

z-index 常和 position 一起使用。

如果元素没有定位，z-index 不一定会按预期生效。

例子

卡片右上角标签

<div class="product-card">
  <span class="tag">新品</span>
  <h3>商品名称</h3>
  <p>商品介绍内容</p>
</div>

.product-card {
  position: relative;
  padding: 24px;
  border: 1px solid #d1d5db;
}
 
.tag {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 4px 8px;
  background-color: #ef4444;
  color: white;
}

这个例子中，.product-card 提供定位参考，.tag 放在右上角。

固定顶部导航栏

<header class="site-header">网站导航</header>

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: white;
  z-index: 100;
}

这个导航栏会固定在页面顶部。

因为 fixed 会脱离文档流，页面内容可能会被导航栏挡住。

通常需要给主体内容增加上边距或内边距。

main {
  padding-top: 64px;
}

吸顶标题

<h2 class="sticky-title">基础知识</h2>
<p>这里是很多正文内容。</p>

.sticky-title {
  position: sticky;
  top: 0;
  background-color: white;
}

标题滚动到顶部后会停住，适合长页面分区。

特点

• position: static; 是默认值，元素按文档流排列
• position: relative; 不脱离文档流，原位置保留
• position: absolute; 通常脱离文档流，参考最近的非 static 祖先元素
• position: fixed; 通常脱离文档流，参考浏览器视口
• position: sticky; 会先在文档流中，滚动到指定位置后吸附
• top、right、bottom、left 用来控制偏移位置
• z-index 用来控制重叠元素的显示层级

注意事项

• 不要用大量 absolute 做整个页面布局，维护会很困难
• 给子元素做 absolute 时，父元素通常要写 position: relative;
• fixed 元素可能会挡住页面内容，需要给内容留出空间
• sticky 通常需要配合 top 才能明显生效
• z-index 不是越大越好，项目中最好有统一的层级规则
• 定位可以解决局部位置问题，但整体布局更适合使用 flex 或 grid

理解

可以把 CSS 定位理解为：在正常排版之外，给某些元素一个更明确的位置控制方式。

relative 是“在原地附近挪一挪”，原来的位置还在。

absolute 是“从正常队伍里拿出来，按参考容器摆放”。

fixed 是“固定在浏览器窗口上”，页面滚动它也不动。

sticky 是“平时正常排队，滚到某个位置后粘住”。

定位很适合做角标、浮动按钮、弹窗、吸顶导航，但不适合滥用来排整个页面。

引出

理解定位之后，可以继续学习 CSS Flexbox 和 CSS Grid，用更适合的方式处理页面中的整体排列问题。