定位position

最新推荐文章于 2023-07-26 15:01:55 发布

原创最新推荐文章于 2023-07-26 15:01:55 发布 · 357 阅读

0 ·

CC 4.0 BY-SA版权

html+css 专栏收录该内容

25 篇文章

订阅专栏

本文详细解析了CSS中的三种定位方式：相对定位(relative)、绝对定位(absolute)与固定定位(fixed)。介绍了每种定位的特点、用途及实际应用场景，并通过实例说明如何实现元素的精确布局。

1.相对定位relative（占位置）

仍处于标准文档流中
相对于原来位置进行偏移

相对定位的性质：不脱标、老家留坑、形影分离（影子出去了，但本质不动）
用途：一般用于微调元素、绝对定位的参考

2.绝对定位absolute（不占位置）

相对于浏览器窗口进行定位；当拖拽页面滚动条时，该元素随其一起滚动；
1.完全脱离标准文档流
2.不会对它的兄弟造成影响
3.当一个元素设置绝对定位，没有宽度时，元素的宽度会根据内容进行自动调节
4.如果父级没有定位，儿子绝对定位就以<html>定位，即屏幕左上角为基准进行移动定位
5.如果父级有定位，就找最近的父级进行定位

所以一般是“子绝父相”。即父亲相对定位，儿子绝对定位。儿子相对于父级元素进行定位。用于CSS精灵图定位、小图标定位。

绝对定位的性质：脱标（所有的标准文档流在绝对定位后就都不遵守了，就不区分所谓的行内元素块元素，不需要display:block;就可以直接设置宽高了）
用途：用于“压盖”（一个东西压在另一个东西上面）、用于轮播图两侧的三角形
绝对定位的盒子居中例如：

width: 600px;
height: 60px;
position: absolute;
left: 50%;/*盒子左边框会贴着屏幕的中心线*/
margin-left: -300px;/*总宽度的一半（注意是否有padding）*/

3.固定定位position: fixed;：（占位置）

相对于浏览器窗口进行定位；当拖拽页面滚动条时，该元素不会滚动；
比如返回顶部图标在右下角固定住，不会随浏览器变化而改变位置。（IE6不兼容固定定位）

性质：脱离标准文档流
用途：返回顶部、顶部通栏、弹出框