一、3种定位一句话讲懂1. 相对定位 position: relative只挪自己不影响别人用法给元素加 position: relative;特点视觉上元素移走了但它原来占的位置不会空着别的元素不会挤过来2. 绝对定位 position: absolute找个爹精准卡位用法给元素加 position: absolute;特点完全脱离原来的排版原来占的位置直接消失别的元素会补上来3. 固定定位 position: fixed钉在屏幕上滚哪都不动用法给元素加 position: fixed;特点永远待在屏幕的固定位置和页面滚动没关系二、一张表记住3种定位的区别定位方式参照物原来的位置还在吗页面滚动时动吗相对定位自己原来的位置✅ 保留跟着页面一起滚绝对定位最近的已定位父元素❌ 不保留跟着页面一起滚固定定位浏览器窗口❌ 不保留纹丝不动总结1. 想微调元素位置又不打乱页面排版 → 用相对定位2. 想把元素放在另一个元素的角落 → 用「相对定位当容器 绝对定位放元素」3. 想让元素一直钉在屏幕上 → 用固定定位三、与3种定位方式搭配使用的4个偏移属性一张表让你看懂怎么挪位置偏移属性作用正负值规则top控制元素垂直方向的位置正值元素向下移动负值元素向上移动bottom控制元素垂直方向的位置正值元素向上移动负值元素向下移动left控制元素水平方向的位置正值元素向右移动负值元素向左移动right控制元素水平方向的位置正值元素向左移动负值元素向右移动想往哪里挪就用对应的属性。最后我们来看一个示例代码吧!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; /* 留出滚动空间 */ position: relative; /* 提示使用相对定位 */ } /* 题目要求完成下面蓝色标签的样式 */ .tag { width: 80px; height: 30px; background-color: #4dabf7; border-radius: 5px; font-size: 14px; text-align: center; line-height: 30px; position: absolute; top: -5px; right: -5px; /* 提示使用绝对定位相对于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; position: fixed; bottom: 30px; right: 30px; /* 提示使用固定定位 */ } /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运行结果如下屏幕录制 2026-05-24 211424
