[特殊字符]《CSS3定位手把手教学：5大定位模式+实战代码，零基础也能征服布局！》-优快云博客

📌《CSS3定位手把手教学：5大定位模式+实战代码，零基础也能征服布局！》

🔍 CSS定位完全指南

CSS定位是控制元素位置的核心技术，下表是5种定位模式的快速对比：

定位方式	参照物	脱离文档流	常用场景	核心属性
‌static静态定位‌	正常流	❌	默认布局	无
‌relative相对定位‌	元素原始位置	❌	微调元素位置	top/left/bottom/right
‌absolute绝对定位‌	最近定位父元素	✅	悬浮菜单、自定义控件	需搭配定位父元素
‌fixed固定定位‌	浏览器视口	✅	固定导航栏、弹窗	常用于全屏定位
‌sticky粘性定位‌	父容器与视口间切换	❌	吸顶导航、表头固定	需定义阈值(top/bottom)

🚀 5种定位代码示例

1. static 定位（默认）

<div class="box">我是静态定位元素</div>

.box {
  position: static; /* 默认值可不写 */
  /* 设置top/left等偏移属性无效 */
}

2. relative 定位与 absolute 定位

<div class="parent">
  <div class="child"></div>
</div>

.parent {
  position: relative; /* 必须声明 */
  width: 300px;
  height: 200px;
}

.child {
  position: absolute;
  bottom: 0;
  right: 0;
  /* 相对于父容器右下角定位 */
}

“子绝必相”太重要了，是定位中最常用的一种方式。这句话的意思是：子级是绝对定位的话，父级要用相对定位。
① 子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子。
② 父盒子需要加定位限制子盒子在父盒子内显示。
③ 父盒子布局时，需要占有位置，因此父亲只能是相对定位。

这就是子绝必相的由来，所以相对定位经常用来作为绝对定位的父级。
总结：因为父级需要占有位置，因此是相对定位，子盒子不需要占有位置，则是绝对定位

4. fixed 定位

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  /* 始终固定在视口顶部 */
  z-index: 1000;
}

5. sticky 定位（默认）

<div class="parent">
  <div class="child"></div>
</div>

.section-title {
  position: sticky;
  top: 20px; /* 触发粘性效果的阈值 */
  background: white;
  /* 滚动到阈值位置后变为固定定位 */
}

💡 核心技术总结

✅ 核心原则
‌参照物选择‌

1. absolute定位

找最近的‌非static定位祖先‌
fixed直接锁定‌浏览器视口‌
sticky在‌父容器‌和‌视口‌间动态切换

2.层叠控制‌

.element {
  z-index: 10; /* 仅对定位元素有效 */
}

3. 实战技巧‌

/* 经典居中方案 */
.center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

4. 定位特性

绝对定位和固定定位也和浮动类似。

行内元素添加绝对或者固定定位，可以直接设置高度和宽度
块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小。
浮动元素、绝对定位(固定定位)元素的都不会触发外边距合并的问题
浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字(图片)，但是绝对定位(固定定位)会压住下面标准流所有的内容。浮动之所以不会压住文字，因为浮动产生的目的最初是为了做文字环绕效果的。文字会围绕浮动元素