HTML的几种定位方式

HTML中的几种定位方式

1. 相对定位
2. 绝对定位
3. 固定定位

定位详解

• 定位也是用来布局的，它由两部分组成：定位=定位模式 + 边偏移

边偏移

边偏移属性	示例	描述
top	top:80px	顶端偏移量，定义元素相对于其父元素上边线的距离
bottom	bottom：80px	底部偏移量，定义元素相对于其父元素下边线的距离
left	left：80px	左侧偏移量，定义元素相对于其父元素左边线的距离
right	right：80px	右侧偏移量，定义元素相对于其父元素右边线的距离

定位模式（position）

语法

选择器{position：属性值；}

定位模式是有不同的分类，在不同的情况下我们用到不同的定位方式。

值	语义
static	静态定位
relative	相对定位
absolute	绝对定位
fixed	固定定位

静态定位（static）----了解

• 静态定位时元素的默认定位方式，无定位的意思。他相当于border里面的none，不要定位的时候用
• 静态定位 按照标准流特性摆放位置，他没有边偏移。
• 静态定位在布局时我们几乎不用

相对定位（relative）----重要

• 相对定位是元素相对于它 原来在标准流中的位置来说的。（自恋型）

相对定位的特点（重点）：

1. 相对于自己原来在标准流中位置来移动的
2. 原来在标准流的区域继续占有，后面的盒子仍然以标准流的方式对待它。

绝对定位（absolute）----重要

• 绝对定位是元素以带有定位的父级元素来移动位置（俗称拼爹型）

1. 完全脱标——完全不占位置
2. 父元素没有定位，则以浏览器为准定位（Document文档）。
3. 父元素要有定位：将元素依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。

• 绝对定位的特点（重点）

1. 绝对是以带有定位的父级元素来移动位置（俗称拼爹）如果父级都没有定位，则以浏览器文档为准移动位置
2. 不保留原来的位置，完全是脱标的。
3. 因为绝对定位的盒子是拼爹的，所以要和父级搭配一起来使用

定位口诀——子绝父相----子级是绝对定位，父级是相对定位

为什么在布局时，子集元素使用绝对定位时，父级元素就要用相对定位呢？

固定定位（fixed）—重要

• 固定定位时绝对定位的一种特殊形式（认死理型）如果说绝对定位是一个矩形那么固定定位就类似于正方形

1. 完全脱标——完全不占位置
2. 只认浏览器的可视窗口——浏览器可视窗口 + 边偏移属性 来设置元素的位置
   • 跟父元素没有任何的关系；单独使用的
   • 不随滚动条滚动。

定位小结

定位模式	是否脱标占有位置	移动位置基准	模式转换（行内快）	使用情况
静态static	不脱标，正常模式	正常模式	不能	几乎不用
相对定位relative	不脱标，占有位置	相对自身位置发生偏移	不能	基本单独使用
绝对定位absolute	完全脱标，不占有位置	相对于定位父级移动位置	能	要和定位父级元素搭配使用
固定定位	完全脱标，不占有位置	相对于浏览器移动位置	能	单独使用，不需要父级

注意：

1.边偏移需要和定位模式联合使用，单独使用无效

2.top和bottom不用同时使用

3.left和right不要同时使用