定位(position)
概念
将盒子定在某一个位置(最上层)
标准流在最底下 — 浮动中间 — 定位最上层
静态定位(static)
-
静态定位是元素默认的定位方式,无定位的意思。它相当于
border
中的none
-
静态定位是按照标准流特性摆放位置,它没有边偏移
相对定位(relative)
-
相对定位是元素对于它 原来在标准流中的位置来说的
-
原来在 标准流 的区域 继续占有,后面的盒子依然以标准流的方式对待它
绝对定位(absolute)
- 绝对定位是元素以带有 定位的父元素 来移动位置(如果父级没有定位就会往上找直到浏览器为止)
- 绝对定位的元素完全 不占标准流 中的 位置
子绝父相 : 父级要占有位置所以要相对定位,子级要随意摆放用绝对定位
固定定位(fixed)
- 完全脱标,完全不占位置
- 只认浏览器的窗口
- 跟父元素没有关系,单独使用
- 不随着滚动条滚动
堆叠顺序
在使用定位布局时,可能会出现 盒子重叠的情况
加了定位的盒子,默认后来者居上,后面的盒子会压住前面的盒子
应用 z-index
层叠等级属性可以调整盒子的堆叠顺序
z-index
的特性:
- 属性值:正整数、负整数、或0,默认是0,数值越大,盒子就越靠上
- 如果属性值相同,则按照书中书写的顺序,后来居上
- 数字的后边不能加单位
注:
z-index
只能用于相对定位、绝对定位和固定定位的元素,其他标准流、浮动和静态定位无效
定位改变display属性
绝对定位和固定的定位也和浮动类似,默认转换的特性转换为行内块。
所以说,一个行内的盒子如果加了浮动、固定定位和绝对定位,不用转换,就可以给这个盒子设置宽度和高度等。
浮动元素、绝对定位元素和固定定位元素的都不会触发外边距合并的问题
小结
定位模式 | 是否脱标占有位置 | 移动位置基准 | 模式转换(行内块) | 使用情况 |
---|---|---|---|---|
静态(static) | 不脱标,正常模式 | 正常位置 | 不能 | 几乎不用 |
相对定位(relative) | 不脱标,占有位置 | 相对自身位置移动 | 不能 | 基本上单独使用 |
绝对定位(absolute) | 完全脱标,不占有位置 | 相对于定位父级移动位置 | 能 | 要和定位父级元素搭配使用 |
固定定位(fixed) | 完全脱标,不占有位置 | 相对于浏览器移动位置 | 能 | 单独使用,不需要父级 |