第18篇定位系统详解上浮动能完成一些布局但遇到需要精确控制元素位置的场景就力不从心了。CSS 的position属性提供了五种定位模式本篇先讲解最基础也最常用的三种静态定位、相对定位和绝对定位。学习目标理解 position 五种取值的语义区别掌握相对定位relative的使用场景掌握绝对定位absolute的参照规则理解定位上下文的概念学会用绝对定位实现常见 UI 模式核心知识点一、position 概览取值名称脱离文档流偏移参照static静态定位否无默认值relative相对定位否自身原始位置absolute绝对定位是最近的定位祖先fixed固定定位是视口sticky粘性定位否滚动时特殊视口 容器边界.box{position:static;/* 默认值 */position:relative;/* 相对定位 */position:absolute;/* 绝对定位 */position:fixed;/* 固定定位 */position:sticky;/* 粘性定位 */}偏移属性top、right、bottom、left仅在非static时生效。二、静态定位 static/* 以下两种写法等价 */.box{position:static;}.box{}/* 未设置 position默认就是 static */static是默认值元素按照正常文档流排列偏移属性top/left等无效。三、相对定位 relative元素保留原来的空间然后基于自身原始位置进行偏移。.relative-box{position:relative;top:20px;/* 向下移动 20px */left:30px;/* 向右移动 30px */}关键点不脱流其他元素仍然当它还在原位置创建层叠上下文z-index开始生效常用场景作为绝对定位子元素的定位上下文/* 场景微调元素位置 */.badge{position:relative;top:-4px;/* 向上微调 */}/* 场景创建定位上下文 */.card{position:relative;/* 让内部的 absolute 以此为参照 */}.card .close-btn{position:absolute;top:8px;right:8px;}四、绝对定位 absolute元素完全脱离文档流相对于最近的定位祖先position 非 static 的元素进行定位。定位规则/* 1. 找到定位上下文 */.ancestor{position:relative;/* 或 absolute/fixed/sticky */}/* 2. 绝对定位元素 */.child{position:absolute;top:0;left:0;}如果没有定位祖先则相对于初始包含块通常是视口/html定位。尺寸拉伸/* 填满定位上下文 */.full-overlay{position:absolute;top:0;right:0;bottom:0;left:0;/* 等价于 inset: 0; */}/* 现代简写 */.full-overlay{position:absolute;inset:0;/* top right bottom left 的简写 */}居中技巧/* 绝对定位居中 */.centered{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);/* 减去自身尺寸的一半 */}五、定位上下文详解定位上下文Positioning Context是绝对定位元素的参照坐标系。创建定位上下文的方式/* 以下任意一种都会创建定位上下文 */.context{position:relative;}/* 最常用 */.context{position:absolute;}.context{position:fixed;}.context{position:sticky;}.context{transform:translate(0);}/* transform 也会创建 */.context{filter:blur(0);}/* filter 也会创建 */.context{perspective:1000px;}/* perspective 也会创建 */⚠️ 注意transform、filter、perspective等属性会意外创建定位上下文可能导致绝对定位元素的参照系改变。定位上下文的选择策略divclasspage!-- 不创建上下文 --divclasscard!-- 创建上下文: position: relative --imgsrcphoto.jpgspanclasstag标签/span!-- absolute, 以 .card 为参照 --/div/div.card{position:relative;}.tag{position:absolute;top:12px;left:12px;background:#e74c3c;color:white;padding:4px 8px;border-radius:4px;}六、z-index 与层叠上下文z-index 只在定位元素上生效/* 有效 */.box{position:relative;z-index:10;}/* 无效static 元素 z-index 不生效 */.box{z-index:999;/* 被忽略 */}层叠顺序规则同一层叠上下文内元素按以下顺序从下到上堆叠根元素背景/边框z-index 0的定位元素非定位的块级元素非定位的浮动元素非定位的行内元素z-index: auto / 0的定位元素z-index 0的定位元素.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:100;}.modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:101;/* 比遮罩高 */}七、绝对定位实战模式模式 1图片标签.card{position:relative;}.card .badge{position:absolute;top:12px;right:12px;background:#e74c3c;color:white;padding:4px 12px;border-radius:20px;font-size:12px;}模式 2图片遮罩.image-wrapper{position:relative;display:inline-block;}.image-wrapper::after{content:;position:absolute;inset:0;background:linear-gradient(transparent 60%,rgba(0,0,0,0.7));border-radius:inherit;}模式 3下拉菜单.dropdown{position:relative;}.dropdown-menu{position:absolute;top:100%;/* 紧贴父元素底部 */left:0;min-width:100%;/* ... */}模式 4关闭按钮.dialog{position:relative;padding:24px;}.dialog .close{position:absolute;top:12px;right:12px;width:32px;height:32px;/* ... */}动手练习练习 1卡片标签创建一个商品卡片图片区域使用相对定位作为上下文左上角添加热卖标签绝对定位右下角添加价格绝对定位在图片上练习 2下拉菜单实现一个简单的下拉菜单菜单按钮相对定位下拉列表绝对定位紧贴按钮下方下拉列表宽度不小于按钮宽度练习 3模态框遮罩实现一个模态框黑色半透明遮罩覆盖全屏fixed 定位白色内容框在屏幕正中absolute transform 居中关闭按钮在内容框右上角常见误区 ⚠️误区真相“position: relative脱离文档流”不脱离它保留原位置只是视觉偏移“absolute相对于父元素定位”是相对于最近的定位祖先不是直接父元素“设置top: 0后元素在页面顶部”只在定位上下文是视口时才在页面顶部“z-index对任何元素都有效”只对定位元素非 static生效“z-index: 9999一定在最上面”可能被更高层叠上下文的元素覆盖“transform不影响定位”transform会创建新的定位上下文和层叠上下文“inset: 0兼容性不好”现代浏览器全部支持是 top/right/bottom/left 的完美简写速查卡片 五种定位模式模式脱流参照物static否无relative否自身absolute是定位祖先fixed是视口sticky否*视口容器绝对定位居中.center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}填满父元素.fill{position:absolute;inset:0;/* top:0; right:0; bottom:0; left:0 */}创建定位上下文最常用.context{position:relative;}扩展阅读MDN: positionMDN: z-indexMDN: 层叠上下文CSS-Tricks: Absolute Positioning Inside Relative Positioning英文配套代码CODE/18/position-basics.html — 相对/绝对定位基础演示CODE/18/position-patterns.html — 常见定位模式实战下一步进入 第19篇定位系统详解下学习固定定位、粘性定位以及定位相关的现代技巧。