将盒子定在某一个位置 自由的漂浮在其他盒子(包括标准流和浮动)的上面
定位 = 定位模式 + 边偏移
边偏移属性 | 示例 | 描述 |
---|---|---|
top |
top: 80px |
顶端偏移量,定义元素相对于其父元素上边线的距离。 |
bottom |
bottom: 80px |
底部偏移量,定义元素相对于其父元素下边线的距离。 |
left |
left: 80px |
左侧偏移量,定义元素相对于其父元素左边线的距离。 |
right |
right: 80px |
右侧偏移量,定义元素相对于其父元素右边线的距离 |
选择器 { position: 属性值; }
值 | 语义 |
---|---|
static |
静态定位 |
relative |
相对定位 |
absolute |
绝对定位 |
fixed |
固定定位 |
静态定位是元素的默认定位方式
- 相对定位是元素相对于它原来在标准流中的位置来说的
- 原来在标准流的区域继续占有,后面的盒子仍然以标准流的方式对待它
- 绝对定位是元素以带有定位的父级元素来移动位置
- 完全脱标 ---- 完全不占位置
- 父元素没有定位,则元素依据最近的已经定位(绝对、固定或相对定位)的父元素(祖先)进行定位
子绝父相 ---- 子级是绝对定位,父级要用相对定位。
-
完全脱标 ---- 完全不占位置
-
只认浏览器的可视窗口 ----
浏览器可视窗口 + 边偏移属性
来设置元素的位置- 不随滚动条滚动
绝对定位/固定定位的盒子不能通过设置
margin: auto
设置水平居中。
left: 50%;
:让盒子的左侧移动到父级元素的水平中心位置;margin-left: -100px;
:让盒子向左移动自身宽度的一半。
加了定位的盒子,默认后来者居上, 后面的盒子会压住前面的盒子
selector {
z-index: value;
}
属性值:正整数、负整数或 0,默认值是 0,数值越大,盒子越靠上
z-index
只能应用于相对定位、绝对定位和固定定位的元素,其他标准流、浮动和静态定位无效
一个行内的盒子,如果加了浮动、固定定位和绝对定位,不用转换,就可以给这个盒子直接设置宽度和高度等
给盒子改为了浮动或者定位,就不会有垂直外边距合并的问题了
定位模式 | 是否脱标占有位置 | 移动位置基准 | 模式转换(行内块) | 使用情况 |
---|---|---|---|---|
静态static | 不脱标,正常模式 | 正常模式 | 不能 | 几乎不用 |
相对定位relative | 不脱标,占有位置 | 相对自身位置移动 | 不能 | 基本单独使用 |
绝对定位absolute | 完全脱标,不占有位置 | 相对于定位父级移动位置 | 能 | 要和定位父级元素搭配使用 |
固定定位fixed | 完全脱标,不占有位置 | 相对于浏览器移动位置 | 能 | 单独使用,不需要父级 |