position:fixed 实现相对于父元素定位

比如：中间内容区域的大小固定为1000px，对应不同的浏览器宽度，要使得某一个资源子固定在相对于内容区域的某一个位置，就不能使用 left:xxx，right:xxx这样写

position:fixed 是对于浏览器窗口定位的，要实现相当于父元素定位，可以这样：

<style>
  .fa {
    width: 500px;
    height: 5000px;
    background-color: red;
    margin: 0 auto;
  }

  .son {
    width: 100px;
    height: 100px;
    background-color: green;
    position: fixed;
    margin-left: 510px;
  }
</style>

<body>

  <div class="fa">
    <div class="son"></div>
  </div>

</body>

效果：
在这里插入图片描述

这样，son 元素就会一直在 fa 元素往右10px的位置固定在页面中了

# html
Logo
天工造物局

北京人形旗下天工造物具身智能开源社区，聚焦具身天工与慧思开物两大平台

更多推荐

Understand Anything 多智能体知识图谱管线：从代码扫描到可交互 Dashboard 的实现解析

本文以 Understand Anything 的官方文档为主线，系统拆解它如何用一条「Tree-sitter 静态分析 + LLM 语义理解」的多智能体管线，把任意代码库 / 知识库 / 文档转换成可探索、可检索、可问答的知识图谱，并落到一个可交互的 Web Dashboard。读完你应能掌握：如何安装并在 Claude Code / Codex / Cursor / Copilot / Gem

avatar 天工造物局

graphify 视频音视频转写全流程解析：从 detect 结果到知识图谱文档的 Step 2.5

graphify 的核心能力是把任意语料（代码、文档、PDF、图片）转化为可查询的知识图谱，而视频与音频文件无法被直接阅读，必须先把它们转写成文本。本文围绕 `graphify` 运行手册中的转写参考文档 [transcribe.md](https://link.gitcode.com/i/d3285781588e0f1b84886dfdbc4fe7f6)，完整讲解 "Step 2.5 - Tra

avatar 天工造物局

ML-For-Beginners 终章：经典机器学习在金融、医疗、零售等八大行业中的真实落地场景

本篇技术指南基于开源课程仓库 ML-For-Beginners 的收尾课程《Postscript: Machine learning in the real world》（对应仓库目录 [9-Real-World/1-Applications](https://link.gitcode.com/i/6b23002df80861c20abf34d7db63ef41)）编写。该课此前 11 周的教学带

avatar 天工造物局