[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"knowledge-\u002Fapi\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fposition":3,"knowledge-related-\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fposition":809,"knowledge-series-\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fposition":836},{"source":4,"connector":5,"page":6},"sqlite","better-sqlite3",{"path":7,"title":8,"description":9,"category":10,"tags":11,"date":14,"pinned":15,"draft":15,"body":16,"seo":805,"stem":806,"id":807,"extension":808},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fposition","定位","position 指定元素如何参与定位方案：在 常规流 中占位，或相对某个包含块（containing block）偏移。配合 top \u002F right \u002F bottom \u002F left（或简写 inset）控制偏移量；非 static…","技能小册",[12,13],"css","position","2022-11-08",false,{"type":17,"value":18,"toc":781},"minimark",[19,22,66,79,83,177,183,190,211,217,245,251,323,329,360,366,429,432,532,536,575,584,587,638,641,700,703,706],[20,21,8],"h1",{"id":8},[23,24,25,28,29,33,34,39,40,43,44,43,47,43,50,53,54,57,58,61,62,65],"p",{},[26,27,13],"code",{}," 指定元素如何参与",[30,31,32],"strong",{},"定位方案","：在 ",[35,36,38],"a",{"href":37},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fdisplay","常规流"," 中占位，或相对某个**包含块（containing block）**偏移。配合 ",[26,41,42],{},"top"," \u002F ",[26,45,46],{},"right",[26,48,49],{},"bottom",[26,51,52],{},"left","（或简写 ",[26,55,56],{},"inset","）控制偏移量；非 ",[26,59,60],{},"static"," 时还可使用 ",[26,63,64],{},"z-index"," 控制层叠顺序。",[23,67,68,69,73,74,78],{},"定位解决的是「在流式布局之外，把某个盒子放到哪里、叠在哪一层」，与 ",[35,70,72],{"href":71},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fgrid","Grid","、",[35,75,77],{"href":76},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fflex","Flex"," 等「如何分配行列\u002F主轴空间」是不同层面的能力，常组合使用。",[80,81,82],"h2",{"id":82},"偏移与层叠",[84,85,86,119,134,156],"ul",{},[87,88,89,33,99,101,102,105,106,105,109,105,112,115,116,118],"li",{},[30,90,91,43,93,43,95,43,97],{},[26,92,42],{},[26,94,46],{},[26,96,49],{},[26,98,52],{},[26,100,13],{}," 为 ",[26,103,104],{},"relative"," | ",[26,107,108],{},"absolute",[26,110,111],{},"fixed",[26,113,114],{},"sticky"," 时生效；",[26,117,60],{}," 时忽略。",[87,120,121,125,126,129,130,133],{},[30,122,123],{},[26,124,56],{},"：上述四属性的简写，如 ",[26,127,128],{},"inset: 0"," 等价于四边均为 ",[26,131,132],{},"0","。",[87,135,136,139,140,73,143,146,147,150,151,153,154,133],{},[30,137,138],{},"逻辑属性","：在竖排或 RTL 场景可用 ",[26,141,142],{},"inset-block-start",[26,144,145],{},"inset-inline-end"," 等，与 ",[35,148,138],{"href":149},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fnew-css"," 一致，避免硬编码 ",[26,152,42],{},"\u002F",[26,155,52],{},[87,157,158,162,163,166,167,169,170,172,173,176],{},[30,159,160],{},[26,161,64],{},"：仅对",[30,164,165],{},"定位元素","（",[26,168,13],{}," 非 ",[26,171,60],{},"）及 flex\u002Fgrid 子项等特定情况有效；会参与",[30,174,175],{},"层叠上下文","的叠放顺序，数值大者更靠近用户。",[80,178,180,182],{"id":179},"position-各取值",[26,181,13],{}," 各取值",[184,185,187,189],"h3",{"id":186},"static默认",[26,188,60],{},"（默认）",[84,191,192,195],{},[87,193,194],{},"元素按常规流排布，不建立定位偏移。",[87,196,197,43,199,43,201,43,203,73,205,207,208,133],{},[26,198,42],{},[26,200,46],{},[26,202,49],{},[26,204,52],{},[26,206,64],{}," ",[30,209,210],{},"无效",[184,212,214,216],{"id":213},"relative相对定位",[26,215,104],{},"（相对定位）",[84,218,219,230,233],{},[87,220,221,222,225,226,229],{},"相对元素在常规流中的",[30,223,224],{},"原始位置","偏移；",[30,227,228],{},"仍占据原位置的空间","，后续元素不会顶上来。",[87,231,232],{},"偏移不改变其他盒子的布局位置（仅视觉移动）。",[87,234,235,236,238,239,169,241,244],{},"常作为子元素 ",[26,237,108],{}," 的定位参照（「子绝父相」）；",[26,240,64],{},[26,242,243],{},"auto"," 时会创建新的层叠上下文。",[184,246,248,250],{"id":247},"absolute绝对定位",[26,249,108],{},"（绝对定位）",[84,252,253,259,279,310,316],{},[87,254,255,258],{},[30,256,257],{},"脱离常规流","，不为该元素在流中预留空间，后续元素会顶上来。",[87,260,261,262,270,271,274,275,278],{},"包含块（containing block）一般为：距其最近的、",[30,263,264,266,267,269],{},[26,265,13],{}," 不为 ",[26,268,60],{}," 的祖先","的 padding 盒；若无，则相对于",[30,272,273],{},"初始包含块","（连续媒体下通常对应视口\u002F根元素一侧，而非简单说「相对 ",[26,276,277],{},"\u003Chtml>"," 标签本身」）。",[87,280,281,282,284,285,287,288,43,291,43,294,297,298,301,302,305,306,309],{},"下列祖先也会为 ",[26,283,108],{}," 建立包含块（即使自身为 ",[26,286,60],{},"）：例如带 ",[26,289,290],{},"transform",[26,292,293],{},"filter",[26,295,296],{},"perspective","（非 ",[26,299,300],{},"none","）的元素、部分 ",[26,303,304],{},"contain"," 值、",[26,307,308],{},"will-change"," 指定属性等（详见 MDN）。",[87,311,312,313,133],{},"绝对定位盒的 ",[30,314,315],{},"margin 不参与外边距折叠",[87,317,318,319,322],{},"场景：角标、下拉层、卡片内悬浮按钮；父级设 ",[26,320,321],{},"position: relative","（或其它定位）限定范围。",[184,324,326,328],{"id":325},"fixed固定定位",[26,327,111],{},"（固定定位）",[84,330,331,336,339,357],{},[87,332,333,334,133],{},"同样",[30,335,257],{},[87,337,338],{},"默认相对于**视口（viewport）**建立的包含块定位，页面滚动时相对视口不动（如固定顶栏、返回顶部）。",[87,340,341,344,345,73,347,73,349,297,351,353,354,356],{},[30,342,343],{},"例外","：若祖先存在 ",[26,346,290],{},[26,348,293],{},[26,350,296],{},[26,352,300],{},"）等，会改为相对该祖先的包含块定位，表现类似「困在父级内」的 ",[26,355,108],{},"——这是常见踩坑点。",[87,358,359],{},"移动端浏览器地址栏显隐可能导致视口高度变化，固定元素位置可能略有跳动。",[184,361,363,365],{"id":362},"sticky粘性定位",[26,364,114],{},"（粘性定位）",[84,367,368,384,404,419,426],{},[87,369,370,371,374,375,378,379,43,381,383],{},"在常规流中",[30,372,373],{},"仍占位","；",[30,376,377],{},"不脱离文档流","（与 ",[26,380,108],{},[26,382,111],{}," 不同）。",[87,385,386,387,390,391,394,395,43,397,43,399,43,401,403],{},"根据",[30,388,389],{},"最近滚动祖先","与",[30,392,393],{},"粘性包含块","，在达到 ",[26,396,42],{},[26,398,46],{},[26,400,49],{},[26,402,52],{}," 阈值前表现为相对定位，之后「粘」在滚动容器内对应边缘，直到粘性包含块边界离开视口。",[87,405,406,411,412,415,416,418],{},[30,407,408,409],{},"至少一个方向的 inset 不能为 ",[26,410,243],{},"（如 ",[26,413,414],{},"top: 0","），否则该轴上等同于 ",[26,417,104],{}," 且无吸顶效果。",[87,420,421,422,425],{},"父级 ",[26,423,424],{},"overflow: hidden"," 可能导致 sticky 失效；吸顶范围受祖先滚动与包含块限制，不一定是整页视口。",[87,427,428],{},"场景：表头吸顶、分区标题、横向滚动容器内的粘性列。",[80,430,431],{"id":431},"对比总表",[433,434,435,454],"table",{},[436,437,438],"thead",{},[439,440,441,445,448,451],"tr",{},[442,443,444],"th",{},"属性值",[442,446,447],{},"是否脱离常规流",[442,449,450],{},"主要参照（包含块）",[442,452,453],{},"常用场景",[455,456,457,473,488,503,517],"tbody",{},[439,458,459,464,467,470],{},[460,461,462],"td",{},[26,463,60],{},[460,465,466],{},"否",[460,468,469],{},"—",[460,471,472],{},"默认排版",[439,474,475,479,482,485],{},[460,476,477],{},[26,478,104],{},[460,480,481],{},"否（保留原空间）",[460,483,484],{},"自身原位置",[460,486,487],{},"微调、作为定位父级",[439,489,490,494,497,500],{},[460,491,492],{},[26,493,108],{},[460,495,496],{},"是",[460,498,499],{},"最近定位祖先或初始包含块",[460,501,502],{},"角标、浮层、卡片内定位",[439,504,505,509,511,514],{},[460,506,507],{},[26,508,111],{},[460,510,496],{},[460,512,513],{},"视口（可被 transform 等祖先改变）",[460,515,516],{},"固定导航、悬浮客服",[439,518,519,523,526,529],{},[460,520,521],{},[26,522,114],{},[460,524,525],{},"否（仍占位）",[460,527,528],{},"滚动祖先 + 粘性包含块",[460,530,531],{},"吸顶表头、粘性标题",[80,533,535],{"id":534},"与-grid-flex-的分工","与 Grid \u002F Flex 的分工",[433,537,538,551],{},[436,539,540],{},[439,541,542,544,547],{},[442,543],{},[442,545,546],{},"Grid \u002F Flex",[442,548,549],{},[26,550,13],{},[455,552,553,564],{},[439,554,555,558,561],{},[460,556,557],{},"作用",[460,559,560],{},"在容器内分配轨道或主轴空间（布局系统）",[460,562,563],{},"在包含块内精确偏移、叠层",[439,565,566,569,572],{},[460,567,568],{},"典型用法",[460,570,571],{},"页面骨架、列表、表单行",[460,573,574],{},"角标、弹层、吸顶、覆盖在格子上的图标",[23,576,577,578,580,581,133],{},"示例：用 ",[35,579,72],{"href":71}," 做「侧栏 + 主内容」，在主内容格子里对通知图标使用 ",[26,582,583],{},"position: absolute; top: 0; right: 0",[80,585,586],{"id":586},"常见注意点",[84,588,589,612,623],{},[87,590,591,594,595,597,598,600,601,603,604,606,607,153,609,611],{},[30,592,593],{},"子绝父相","：给 ",[26,596,108],{}," 子元素一个 ",[26,599,321],{},"（或其它非 ",[26,602,60],{},"）的父级，避免相对整页定位；注意 ",[26,605,290],{}," 父级也会成为 ",[26,608,111],{},[26,610,108],{}," 的包含块。",[87,613,614,617,618,43,620,622],{},[30,615,616],{},"无障碍","：",[26,619,111],{},[26,621,108],{}," 浮层勿遮挡放大字号后的正文；吸顶\u002F固定条注意对比度与焦点顺序。",[87,624,625,628,629,43,631,633,634,637],{},[30,626,627],{},"性能","：滚动容器内大量 ",[26,630,114],{},[26,632,111],{}," 可能增加重绘成本，必要时可配合 ",[26,635,636],{},"will-change: transform"," 等优化（见 MDN 说明）。",[80,639,640],{"id":640},"总结",[84,642,643,654,669,684,695],{},[87,644,645,647,648,650,651,653],{},[26,646,60],{}," 为默认；偏移与 ",[26,649,64],{}," 需非 ",[26,652,60],{}," 定位。",[87,655,656,658,659,43,661,663,664,133],{},[26,657,104],{}," 占位偏移；",[26,660,108],{},[26,662,111],{}," 脱离流；",[30,665,666,668],{},[26,667,114],{}," 仍在流中占位",[87,670,671,673,674,677,678,680,681,683],{},[26,672,108],{}," 看",[30,675,676],{},"定位祖先","与包含块规则；",[26,679,111],{}," 默认相对视口，但受 ",[26,682,290],{}," 等影响。",[87,685,686,688,689,691,692,133],{},[26,687,114],{}," 必须设置有效 ",[26,690,42],{}," 等阈值，并关注滚动祖先与 ",[26,693,694],{},"overflow",[87,696,697,698,133],{},"大布局用 Grid\u002FFlex，局部叠放与微调用 ",[26,699,13],{},[80,701,702],{"id":702},"参考文献",[23,704,705],{},"以下链接在编写时均可正常访问：",[433,707,708,718],{},[436,709,710],{},[439,711,712,715],{},[442,713,714],{},"资料",[442,716,717],{},"说明",[455,719,720,733,745,757,769],{},[439,721,722,730],{},[460,723,724],{},[35,725,729],{"href":726,"rel":727},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fzh-CN\u002Fdocs\u002FWeb\u002FCSS\u002Fposition",[728],"nofollow","MDN：position",[460,731,732],{},"各取值、包含块、sticky 说明",[439,734,735,742],{},[460,736,737],{},[35,738,741],{"href":739,"rel":740},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fzh-CN\u002Fdocs\u002FLearn_web_development\u002FCore\u002FCSS_layout\u002FPositioning",[728],"MDN：学习 CSS 定位",[460,743,744],{},"中文教程与示例",[439,746,747,754],{},[460,748,749],{},[35,750,753],{"href":751,"rel":752},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fzh-CN\u002Fdocs\u002FWeb\u002FCSS\u002FCSS_positioned_layout\u002FUnderstanding_z-index",[728],"MDN：理解 z-index",[460,755,756],{},"层叠上下文与叠放顺序",[439,758,759,766],{},[460,760,761],{},[35,762,765],{"href":763,"rel":764},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fzh-CN\u002Fdocs\u002FWeb\u002FCSS\u002Ftop",[728],"MDN：top \u002F inset",[460,767,768],{},"偏移属性",[439,770,771,778],{},[460,772,773],{},[35,774,777],{"href":775,"rel":776},"https:\u002F\u002Fwww.w3.org\u002FTR\u002Fcss-position-3\u002F",[728],"W3C：CSS Positioned Layout Module Level 3",[460,779,780],{},"官方规范（英文）",{"title":782,"searchDepth":783,"depth":783,"links":784},"",2,[785,786,800,801,802,803,804],{"id":82,"depth":783,"text":82},{"id":179,"depth":783,"text":787,"children":788},"position 各取值",[789,792,794,796,798],{"id":186,"depth":790,"text":791},3,"static（默认）",{"id":213,"depth":790,"text":793},"relative（相对定位）",{"id":247,"depth":790,"text":795},"absolute（绝对定位）",{"id":325,"depth":790,"text":797},"fixed（固定定位）",{"id":362,"depth":790,"text":799},"sticky（粘性定位）",{"id":431,"depth":783,"text":431},{"id":534,"depth":783,"text":535},{"id":586,"depth":783,"text":586},{"id":640,"depth":783,"text":640},{"id":702,"depth":783,"text":702},{"title":8,"description":9},"knowledge\u002Fbooklet\u002Fweb\u002FCss\u002Fposition","knowledge\u002Fknowledge\u002Fbooklet\u002Fweb\u002FCss\u002Fposition.md","md",{"items":810},[811,816,820,824,828,832],{"path":812,"title":813,"description":814,"category":10,"score":815},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fless\u002Fless-core","Less 基础与核心语法","Less 是 JavaScript 实现的 CSS 预处理器，在 CSS 语法上扩展变量（@）、嵌套、混合、运算与函数，编译为普通 CSS 后由浏览器加载；本文覆盖安装、CLI、构建工具集成与全部核心语法。",6,{"path":817,"title":818,"description":819,"category":10,"score":815},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fsass\u002Fsass-intro","Sass 简介与安装","Sass（Syntactically Awesome Style Sheets）是 CSS 预处理器，在 CSS 语法上增加变量、嵌套、混合、模块、控制指令等；有 SCSS 与缩进语法两种源码语法，官方实现为 Dart Sass。",{"path":821,"title":822,"description":823,"category":10,"score":815},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fsass\u002Fsass-modules","模块与控制流：@use、内置函数、@if\u002F@for\u002F@each","Dart Sass 推荐用 @use\u002F@forward 替代已弃用的 @import；内置 sass:* 模块提供颜色、字符串、列表、Map、数学等函数；@if\u002F@for\u002F@each\u002F@while 用于条件与循环生成样式。",{"path":825,"title":826,"description":827,"category":10,"score":815},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fsass\u002Fsass-reuse","复用机制：Mixin 与继承","Mixin（@mixin\u002F@include）支持参数与 @content，适合动态样式；@extend 与 %placeholder 通过合并选择器复用完全相同的静态样式，减少 CSS 体积。",{"path":829,"title":830,"description":831,"category":10,"score":815},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fsass\u002Fsass-syntax","语法基础：变量、嵌套与运算","Sass 语法基础：$ 变量与插值、选择器嵌套与 & 父选择器引用、数学\u002F颜色\u002F字符串运算、三种注释语法及与原生 CSS 嵌套的关系。",{"path":833,"title":834,"description":835,"category":10,"score":815},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fcolor","颜色与背景","color 设置前景（多为文字）色；background-* 设置元素背景（颜色、图像、渐变）。二者共同决定对比度与视觉层次，直接影响 无障碍 阅读体验。排版中的文本颜色用法见 排版与文本。",{"series":837,"title":12,"items":838,"index":896,"prev":897,"next":898},"booklet\u002Fweb\u002Fcss",[839,843,845,849,852,855,859,863,866,870,872,876,879,880,884,888,889,890,891,892],{"path":840,"title":841,"date":842,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fanimation","变换、过渡与动画","2023-01-09",{"path":833,"title":834,"date":844,"pinned":15},"2025-05-01",{"path":846,"title":847,"date":848,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fcss-sass-less","CSS、Sass 与 Less","2019-09-28",{"path":37,"title":850,"date":851,"pinned":15},"display 与常规流","2024-01-30",{"path":76,"title":853,"date":854,"pinned":15},"弹性盒子","2020-09-29",{"path":856,"title":857,"date":858,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Ffont-optimization","字体优化策略","2021-04-23",{"path":860,"title":861,"date":862,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Ffont-unit","字体单位","2021-10-12",{"path":71,"title":864,"date":865,"pinned":15},"网格布局","2020-11-09",{"path":867,"title":868,"date":869,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Flayout-text","排版与文本","2024-01-25",{"path":812,"title":813,"date":871,"pinned":15},"2026-07-23",{"path":873,"title":874,"date":875,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fmodel","盒模型","2023-09-04",{"path":149,"title":877,"date":878,"pinned":15},"现代 CSS 特性概览","2021-11-09",{"path":7,"title":8,"date":14,"pinned":15},{"path":881,"title":882,"date":883,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fless\u002Fproject","工程化集成与扩展","2024-07-02",{"path":885,"title":886,"date":887,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fresponsive","响应式设计与交互","2022-01-31",{"path":817,"title":818,"date":871,"pinned":15},{"path":821,"title":822,"date":871,"pinned":15},{"path":825,"title":826,"date":871,"pinned":15},{"path":829,"title":830,"date":871,"pinned":15},{"path":893,"title":894,"date":895,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fvisual-effects","视觉效果","2021-11-04",12,{"path":149,"title":877,"date":878,"pinned":15},{"path":881,"title":882,"date":883,"pinned":15}]