定位position

来源：互联网发布：阿里云服务器租用合同编辑：程序博客网时间：2024/05/16 14:02

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不兼容固定定位）

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

0 0