课堂笔记12周：相对绝对固定定位与锚点跳转

课堂笔记：相对/绝对/固定定位与锚点跳转

一、相对定位与绝对定位的联动（子绝父相）

示例代码结构

css

.parent {
  position: relative;   /* 父级：相对定位 */
}
.son {
  position: absolute;   /* 子级：绝对定位 */
  left: -110px;         /* 水平向左偏移110px */
  top: -110px;          /* 垂直向上偏移110px */
}

核心知识点

概念 说明
子绝父相 子元素使用 position: absolute，父元素使用 position: relative，则子元素的偏移参考系是父元素的 border-box 左上角（即包含边框区域）。
绝对定位的包含块 绝对定位元素会相对于最近的非 static 定位祖先进行偏移。若没有这样的祖先，则相对于初始包含块（<html> 或视口）。
负偏移值 left: -110px 使子元素向左移动 110px（超出父元素左边界）；top: -110px 使其向上移动 110px（超出父元素上边界）。负值可将元素移出父容器范围。
脱离文档流 absolute 使子元素完全脱离正常文档流，不再占据原有空间，父元素高度不受其影响。

二、固定定位（position: fixed）与锚点返回顶部

示例代码

css

.back {
  position: fixed;
  bottom: 30px;
  right: 30px;
}

html

<h1 id="top">顶部</h1>
<div class="back">
  <a href="#top"><img src="img/向上1.png" alt="回到顶部" /></a>
</div>

核心知识点

概念 说明
固定定位 position: fixed 使元素相对于浏览器视口定位。滚动页面时，元素位置始终固定在视口内的指定位置。
偏移属性 bottom: 30px 表示元素距离视口底部 30px；right: 30px 表示距离视口右侧 30px。常用语“右下角悬浮按钮”。
脱离文档流 fixed 同样脱离正常文档流，不占用页面空间，也不受父元素 overflow 或定位影响。
锚点跳转 <a href="#top"> 会跳转到当前页面中 id="top" 的元素位置。#top 中的 top 必须与目标元素的 id 完全匹配。
返回顶部原理 点击链接后浏览器自动滚动到 id="top" 处，本例中 <h1 id="top">顶部</h1> 位于页面最上方，实现返回顶部效果。

三、两个示例中的其他注意点

示例 关键细节
相对/绝对示例 父容器设置了 margin: 100px auto 0 水平居中，并且 position: relative，作为绝对定位子元素的参照。子元素移动后可能超出父容器边框，但不会被裁剪（除非父级设置 overflow: hidden）。
固定定位示例 .main 设置了 height: 3000px 用于制造滚动条；.back 内部放置图片链接；即使 .back 在 .main 内部，fixed 依然相对于视口定位。
posted @ 2026-05-25 16:38  liu123wz  阅读(20)  评论(0)    收藏  举报