1. 相对定位position: relative偏移后元素会 “飘起来”但原来的位置会被保留其他元素不会占用这个空位。它最核心的用法给子元素 absolute 定位提供参照物父元素设置 relative子元素设置 absolute子元素就会相对于父元素定位。2. 绝对定位position: absolute一旦设置元素会脱离文档流后面的元素会直接顶上来占据它原来的位置。定位规则找最近的、设置了 relative/absolute/fixed 的父级元素如果所有父级都没设置就相对于整个文档body定位。3. 固定定位position: fixed元素会固定在浏览器视窗的某个位置不会随页面滚动而移动。常见场景顶部固定导航、右下角 “回到顶部” 按钮、页面居中弹窗。4.代码!DOCTYPE htmlhtml langzh-CNheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleCSS 定位三大方式演示/titlestyle.box {width: 150px;height: 150px;line-height: 150px;text-align: center;color: #fff;font-size: 18px;}.red { background-color: #e74c3c; }.green { background-color: #2ecc71; }.blue { background-color: #3498db; }.orange { background-color: #f39c12; }.demo-normal {margin-bottom: 50px;border: 2px solid #333;padding: 10px;}.demo-relative {margin-bottom: 50px;border: 2px solid #333;padding: 10px;}.box-relative {position: relative;top: 20px;left: 30px;}.demo-absolute {margin-bottom: 50px;border: 2px solid #333;padding: 10px;height: 200px;position: relative;}.box-absolute {position: absolute;top: 20px;right: 30px;}.demo-fixed {height: 1000px;border: 2px solid #333;padding: 10px;}.box-fixed {position: fixed;bottom: 30px;right: 30px;width: 60px;height: 60px;line-height: 60px;border-radius: 50%;}/style/headbodyh31. 文档流默认效果元素从上到下依次排列/h3div classdemo-normaldiv classbox red盒子1/divdiv classbox green盒子2/divdiv classbox blue盒子3/div/divh32. 相对定位原位置保留仅元素自身偏移/h3div classdemo-relativediv classbox red盒子1/divdiv classbox green box-relative相对定位盒子2/divdiv classbox blue盒子3/div/divh33. 绝对定位脱离文档流父级开启相对定位作为参照物/h3div classdemo-absolutediv classbox red盒子1/divdiv classbox green box-absolute绝对定位盒子2/divdiv classbox blue盒子3会被顶上去/div/divh34. 固定定位相对于浏览器窗口固定/h3div classdemo-fixeddiv classbox red盒子1/divdiv classbox green盒子2/divdiv classbox blue盒子3/divdiv classbox orange box-fixed固定按钮/divp滚动页面右下角的“固定按钮”位置不会变化/p/div/body/html5.结果6.补充小知识定位属性配合 top / right / bottom / left 偏移属性使用才能让元素产生位置变化。层级控制定位元素可以用 z-index 控制堆叠顺序值越大越靠上只对设置了非 static 定位的元素生效。
