定位是什么

• 定位是排版页面元素的一种方式
• 这种方式的特点是精确控制元素的位置
• 只有定位布局可以做到精确控制元素的位置

定位的分类

相对定位

• 相对定位是参照自身位置定位

绝对定位

• 绝对定位是参照父级定位

固定定位

• 固定定位是参照浏览器窗口定位

定位参照物

相对定位是参照自身位置定位

绝对定位是参照父级定位

固定定位是参照浏览器窗口定位

1、相对定位的实现步骤

• 第一步：为要定位的元素添加position:relative
• 第二步：设置坐标：left | top | right | bottom

2、绝对定位的实现步骤

• 第一步：为要定位的元素添加position:absolute
• 第二步：设置定位的坐标：left | top | right | bottom
• 第三步：设置定位父级：position:relative

如果不设置定位父级，那么定位父级就是文档（body）

3、固定定位实现步骤

• 第一步：为要定位的元素添加position:fixed
• 第二步：设置定位坐标：left |top | right | bottom