HTML中的几种定位方式
定位详解
- 定位也是用来布局的,它由两部分组成:定位=定位模式 + 边偏移
边偏移
边偏移属性 | 示例 | 描述 |
---|---|---|
top | top:80px | 顶端偏移量,定义元素相对于其父元素上边线的距离 |
bottom | bottom:80px | 底部偏移量,定义元素相对于其父元素下边线的距离 |
left | left:80px | 左侧偏移量,定义元素相对于其父元素左边线的距离 |
right | right:80px | 右侧偏移量,定义元素相对于其父元素右边线的距离 |
定位模式(position)
语法
选择器{position:属性值;}
定位模式是有不同的分类,在不同的情况下我们用到不同的定位方式。
值 | 语义 |
---|---|
static | 静态定位 |
relative | 相对定位 |
absolute | 绝对定位 |
fixed | 固定定位 |
静态定位(static)----了解
- 静态定位时元素的默认定位方式,无定位的意思。他相当于border里面的none,不要定位的时候用
- 静态定位 按照标准流特性摆放位置,他没有边偏移。
- 静态定位在布局时我们几乎不用
相对定位(relative)----重要
- 相对定位是元素相对于它 原来在标准流中的位置来说的。(自恋型)
相对定位的特点(重点):
- 相对于自己原来在标准流中位置来移动的
- 原来在标准流的区域继续占有,后面的盒子仍然以标准流的方式对待它。
绝对定位(absolute)----重要
- 绝对定位是元素以带有定位的父级元素来移动位置(俗称拼爹型)
- 完全脱标——完全不占位置
- 父元素没有定位,则以浏览器为准定位(Document文档)。
- 父元素要有定位:将元素依据最近的已经定位(绝对、固定或相对定位)的父元素(祖先)进行定位。
- 绝对定位的特点(重点)
- 绝对是以带有定位的父级元素来移动位置(俗称拼爹)如果父级都没有定位,则以浏览器文档为准移动位置
- 不保留原来的位置,完全是脱标的。
- 因为绝对定位的盒子是拼爹的,所以要和父级搭配一起来使用
定位口诀——子绝父相----子级是绝对定位,父级是相对定位
为什么在布局时,子集元素使用绝对定位时,父级元素就要用相对定位呢?
固定定位(fixed)—重要
- 固定定位时绝对定位的一种特殊形式(认死理型)如果说绝对定位是一个矩形那么固定定位就类似于正方形
- 完全脱标——完全不占位置
- 只认浏览器的可视窗口——浏览器可视窗口 + 边偏移属性 来设置元素的位置
- 跟父元素没有任何的关系;单独使用的
- 不随滚动条滚动。
定位小结
定位模式 | 是否脱标占有位置 | 移动位置基准 | 模式转换(行内快) | 使用情况 |
---|---|---|---|---|
静态static | 不脱标,正常模式 | 正常模式 | 不能 | 几乎不用 |
相对定位relative | 不脱标,占有位置 | 相对自身位置发生偏移 | 不能 | 基本单独使用 |
绝对定位absolute | 完全脱标,不占有位置 | 相对于定位父级移动位置 | 能 | 要和定位父级元素搭配使用 |
固定定位 | 完全脱标,不占有位置 | 相对于浏览器移动位置 | 能 | 单独使用,不需要父级 |
注意:
1.边偏移需要和定位模式联合使用,单独使用无效
2.top和bottom不用同时使用
3.left和right不要同时使用