这句话的意思就是告诉手机浏览器：“别自作聪明了就用我手机屏幕的实际宽度来渲染页面！”设置好后你按正常尺寸写 CSS 就行，盒子宽度就是屏幕宽度，布局瞬间清爽。

CSS 中的 position 属性主要有四个常用值：staticrelativeabsolutefixed。还有一个后来居上的 sticky。我们一个个来拆解。

这是所有元素的默认状态。没有特别的含义，就是老老实实待在文档流里排队。你设置了 topleft 这些属性也不会生效，因为它根本不想动。

大白话解释： 元素原本在文档流里占着位置，你Ke以通过 topleftrightbottom 让它相对于自己的原位置挪动一下。

Zui关键的一点是：挪动后原来的坑位依然空着！其他元素不会挤过来填补它的位置。这就好比你排队时脚还在原地占着座，但身体探出去跟旁边的人说话，队伍的结构没变。

核心用途： 它Zui常见的作用其实不是“挪自己”，而是“给孩子当参照物”。这一点我们在讲 absolute 时会细说。

大白话解释： 元素完全脱离文档流。它不再排队，原来的坑位也没了其他元素会无视它，直接填补它原来的位置。它的位置参考系是Zui近的那个设置了 position的祖先元素。

Ru果找不到这样的祖先，它就参考视口。

生活类比： 一个人离开队伍，跑去贴着“Zui近的定位锚点”站位。

黄金搭档：Relative + Absolute

这是前端面试和实战中Zui经典的组合。通常我们会给父元素设置 position: relative，然后给子元素设置 position: absolute。这样子元素就会相对于父元素定位，而不是相对于整个页面乱跑。

代码示例：

.parent {
  position: relative; /* 建立定位参照系 */
}
.child {
  position: absolute;
  top: 0;
  right: 0;
}

解释：子元素会贴在父元素的右上角。Ru果父元素不写 relative，子元素就会一直往上找，直到找到 body 或 html，导致位置跑偏。

大白话解释： 想让元素“永远在屏幕可见区域”就用 fixed。它也是脱离文档流的，但它的参考系永远是浏览器窗口。

生活类比： 把便签纸贴在你的手机屏幕上，不管页面怎么滑，便签dou在同一个位置。

典型场景： “回到顶部”按钮、侧边栏悬浮广告、全局遮罩层。

代码示例：

.back-top {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 100;
}

解释：无论页面滚动到哪里按钮dou固定在屏幕右下角。

这是一个比较新的属性，效果非常炫酷。你Ke以把它理解为 relative 和 fixed 的混合体。

大白话解释： 元素在未达到阈值时表现成 relative；一旦滚动到阈值位置，就变成 fixed。

生活类比： 便利贴一开始贴在文档某一行，滚动到顶部后它被“吸”住不再继续上去。

典型场景： 搜索引擎的搜索栏、电商网站的商品分类导航。

代码示例：

.topbar {
  position: sticky;
  top: 0;
  z-index: 99;
  background: white;
}

解释：导航滚动到页面顶部后会“钉住”。

光说不练假把式。我们来kankan几个 Day4 课程中可Neng会遇到的实际需求。

需求：在一个商品卡片右上角显示一个“热卖”的小标签。

思路： 1. 卡片使用 position: relative。 2. 角标使用 position: absolute，并设置 top: 0; right: 0;。

  
热卖

.card {
  position: relative; /* 关键：给角标找个爹 */
  width: 200px;
  height: 300px;
}
.badge {
  position: absolute;
  top: -10px;
  right: -10px;
  background: red;
  color: white;
}

在Zuo“回到顶部”按钮时我们通常希望它是圆滚滚的胶囊形状。这里有个小技巧：不要去算具体的像素值，直接写个超大值。

.back-top {
  border-radius: 999px;
}

浏览器会Zuo限制：圆角不可Neng超过元素几何允许的范围。所以你写 999px，实际会被“裁到Zui大可行圆角”。这比写 50% geng省心，尤其是在宽高不固定的情况下。

掌握了定位还不够，有时候你写了样式却没生效，可Neng是被“优先级”给覆盖了。这里顺便提一下链式选择器。

在 HTML 中，一个元素Ke以写多个 class：

B

在 CSS 中，我们Ke以这样写：

.card { ... }
.badge-card { ... }
.card.badge-card { ... } /* 只有同时拥有这两个class才生效 */

含义： 元素必须同时满足 .card 和 .badge-card 才会命中Zui后一条规则。

Ru果 .card 和 .badge-card dou写了同一个属性，Zui终生效取决于优先级。

链式 class 相当于把多个 class 条件叠在一起，通常比单个 class geng具体，优先级geng高。所以在冲突时.card.badge-card 往往geng容易赢过 .card。

新手速记口诀： * . 找 class * # 找 id * 空格找后代 * 找亲儿子

有时候定位明明写对了效果却hen奇怪。这里有两个常见的“坑”。

你给子元素设置了 absolute，想让它相对于父元素定位，结果它却跑到了老祖宗那里去。为什么？

检查一下父元素是不是没有设置 position: relative。记住absolute 只认Zui近的非 static 祖先。

这是一个高级坑。Ru果某个祖先元素设置了 transformperspectivefilter 等属性，即使它没有写 position: relative，它也会成为 absolute 子元素的参照物。这经常导致预期外的定位错位。

经过这一天的折腾，我们其实只解决了一个核心问题：如何把元素放在我们想要的地方。

让我们回顾一下判断标准： * 想要“滚动到某点才固定”，选 sticky。 * 想“永远在屏幕可见区域”就用 fixed。 * 想让元素“贴着某个盒子角落”时用 absolute + 父级 relative。 * 需要一个“定位锚点”时先上 relative。

前端开发就是这样，从Zui初的“排排坐”到后来的“自由飞翔”，每一个属性的背后dou是对页面渲染逻辑的深刻理解。希望这篇笔记Neng帮你彻底扫清 position 的迷雾。Ru果还有模糊的地方，不妨打开浏览器的 DevTools，kankan Computed 面板，那里永远有Zui诚实的答案。