为什么你的悬浮标签乱跑？父相子绝+固定定位底层原理全拆解

做前端页面布局position定位永远是新手最大的拦路虎角标飘出卡片、返回按钮跟着页面滚动、元素堆叠错位、脱离文档流布局崩坏……很多人学了半个月还是分不清相对、绝对、固定定位写布局全靠瞎调试。今天一次性放出三套完整可运行实战代码分别拆解综合定位实战、纯绝对定位演示、纯固定定位演示。一、综合实际案例相对绝对固定三合一(卡片角标返回顶部)!doctype html html head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title定位综合练习/title style /* 练习题目使用三种定位方式完成以下布局 1. 红色卡片使用相对定位作为容器 2. 蓝色标签使用绝对定位放在红色卡片右上角 3. 绿色返回按钮使用固定定位固定在页面右下角 */ body { padding: 50px; } /* 题目要求完成下面红色卡片的样式 */ .card { width: 300px; height: 200px; background-color: #ff6b6b; border-radius: 10px; padding: 20px; color: white; font-size: 18px; margin-bottom: 600px; /* 留出滚动空间 */ /* 提示使用相对定位 */ } /* 题目要求完成下面蓝色标签的样式 */ .tag { width: 80px; height: 30px; background-color: #4dabf7; border-radius: 5px; font-size: 14px; text-align: center; line-height: 30px; /* 提示使用绝对定位相对于card定位 */ } /* 题目要求完成下面返回按钮的样式 */ .back-btn { width: 50px; height: 50px; background-color: #51cf66; border-radius: 50%; text-align: center; line-height: 50px; color: white; font-weight: bold; cursor: pointer; /* 提示使用固定定位 */ } /style /head body !-- 练习题目说明 -- h2定位综合练习 - 请完成三个盒子的样式/h2 p请根据CSS注释中的提示填写正确的定位属性和偏移值/p hr !-- 红色卡片容器 - 需要添加相对定位 -- div classcard 这是卡片内容 br请为我添加相对定位 !-- 蓝色标签 - 需要添加绝对定位放到右上角 -- div classtag标签/div /div !-- 绿色返回按钮 - 需要添加固定定位固定在右下角 -- div classback-btn↑/div p下方内容用于测试固定定位的滚动效果/p div styleheight: 500px; background: #f0f0f0; padding: 20px; 滚动页面查看绿色按钮是否保持在右下角固定位置... /div /body /html核心知识点拆解1. relative 相对定位不脱离文档流自身占位保留唯一核心作用给内部绝对定位元素当参照物也就是行业口诀「子绝父相」。2. absolute 绝对定位完全脱离文档流不占用页面空间只会向上寻找最近开启定位的父盒子没有则参照浏览器窗口。3. fixed 固定定位永久参照浏览器可视窗口无论页面怎么滚动元素位置纹丝不动常用于回顶按钮、悬浮客服、侧边悬浮栏。二、单独案例absolute绝对定位分层演示多层嵌套盒子演示绝对定位层级、脱离文档流特性直观看到元素重叠、正常文档流对比。!doctype html html head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title绝对定位/title style /* 父容器 - 灰色背景 */ .container { width: 400px; height: 400px; background-color: gray; /* 绝对定位相对于最近的已定位配置了position属性上层元素定位 如果没有已定位的上层元素继续往上找则相对于浏览器窗口定位 */ position: absolute; left: 100px; /* 距离窗口左侧100px */ top: 100px; /* 距离窗口顶部100px */ } /* 第一个子元素 - 红色 */ #div1 { width: 100px; height: 100px; background-color: red; /* 绝对定位相对于已定位的祖先元素container定位 特点脱离文档流不保留原本的空间后续元素会填补空位 */ position: absolute; left: 50px; /* 相对于父容器左侧偏移20px */ top: 50px; /* 相对于父容器顶部偏移20px */ opacity: 0.75; /* 设置透明度0-1之间 */ } /* 第二个子元素 - 绿色 */ #div2 { width: 75px; height: 75px; background-color: green; position: absolute; left: 20px; top: 20px; } /* 第三个子元素 - 蓝色 */ #div3 { width: 50px; height: 50px; background-color: blue; /* 相对定位演示默认的文档流布局未开启绝对定位 */ /* position: absolute; */ /* left: 20px; */ /* top: 20px; */ } /style /head body !-- 父容器包裹三个子div -- div classcontainer !-- 红色div开启绝对定位脱离文档流 -- div iddiv1/div !-- 绿色div未开启定位遵循正常文档流布局 -- div iddiv2/div !-- 蓝色div未开启定位遵循正常文档流布局 -- div iddiv3/div /div /body /html三、单独案例fixed固定定位滚动演示20个长盒子制造超长滚动页面两个固定定位盒子永久锁定在屏幕固定位置直观区分fixed和普通文档流元素。!doctype html html head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title固定定位/title style /* 通用样式所有div盒子 */ div { width: 250px; height: 250px; background-color: red; margin-bottom: 50px; /* 盒子之间的间距 */ } /* 第三个盒子 - 绿色 - 固定定位 */ #div3 { width: 200px; height: 200px; border-radius: 11px; /* 圆角边框 */ background-color: green; /* 固定定位相对于浏览器窗口定位 特点元素固定在窗口的指定位置滚动页面时位置不变 也会脱离文档流不保留原始空间 */ position: fixed; left: 100px; /* 距离窗口左侧100px */ top: 100px; /* 距离窗口顶部100px */ } /* 第五个盒子 - 橙色 - 固定定位 */ #div5 { width: 250px; height: 250px; border-radius: 22px; /* 圆角边框 */ background-color: orange; /* 固定定位相对于浏览器窗口定位 */ position: fixed; left: 150px; /* 距离窗口左侧150px */ top: 150px; /* 距离窗口顶部150px */ } /style /head body !-- 20个div盒子用于演示滚动效果 -- !-- 其中div3和div5使用固定定位滚动页面时它们会保持在屏幕固定位置 -- div盒子1/div div盒子2/div div iddiv3盒子3(固定定位)/div !-- 绿色固定在窗口左上角 -- div盒子4/div div iddiv5盒子5(固定定位)/div !-- 橙色固定在窗口 -- div盒子6/div div盒子7/div div盒子8/div div盒子9/div div盒子10/div div盒子11/div div盒子12/div div盒子13/div div盒子14/div div盒子15/div div盒子16/div div盒子17/div div盒子18/div div盒子19/div div盒子20/div /body /html重点总结fixed 完全不受页面滚动影响参照物永远是浏览器可视窗口同样脱离文档流不会挤压其他正常布局元素是做悬浮组件首选方案。1. 卡片角标万能公式父容器 relative 子元素 absolute2. 滚动悬浮按钮直接用 fixed 简单稳定无兼容坑3. 绝对定位找不到参照时优先检查父盒子有没有加 position:relative4. 三套代码全部复制即可运行新手建议逐段修改top/left/right数值直观感受偏移逻辑今天就到这里了~~~///(^v^)\\\~~~