本文介绍了CSS中的三种定位方式：1. 相对定位，通过`position: relative;`调整元素位置，但保留其在文档流中的原始位置。2. 绝对定位，使用`position: absolute;`，以最近的已定位祖先元素为基准偏移，若无已定位祖先则以浏览器窗口为准，元素脱离文档流。3. 固定定位，利用`position: fixed;`使元素相对于浏览器窗口定位，常用于制作固定广告和导航栏。
1.相对定位：position: relative;（相对于自身位置进行偏移，原本的位置会被保留下来）
例如：（距离左边10px，距离底部20px）
第二个盒子： position: relative;
left: 10px;
bottom: 20px;
2.绝对定位： position: absolute;（绝对定位会以最近的已经定位的元素为基准进行偏移，一般使用relative作为absolute的父级，因为relative不会让父级脱离文档流）（绝对定位的元素会从文档流中脱离，原来的位置会被取代）
*没有已经定位的元素的话会以浏览器窗口为基准定位
第二个盒子： position: absolute;
left: 20px;
top: 100px;（距离左边20px，距离顶部100px）
3.固定定位：position：fixed（固定定位的基准是浏览器窗口，不会因为滑动改变他的位置）
*一般用于固定页面中的广告和顶部导航栏之类的
position: fixed;
right: 0;
top: 300px;（距离顶部300px，距离右边0px）
扫一扫
1027
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
