一、定位的概念
定位 :通过定位将盒子定在页面中的某一位置
二、定位模式
语法: 选择器{ position:值 }
值 | 语义 |
---|---|
static | 静态定位 |
relative | 相对定位 |
absolute | 绝对定位 |
fixed | 固定定位 |
三、偏移量(offset)
偏移量:当元素开启定位后,可以通过偏移量改变元素的位置
边偏移属性 | 描述 |
---|---|
top | 定位元素和定位位置上边的距离, 通俗点来说:top值越大,元素越向下边移动 |
left | 定位元素和定位位置左测的距离, 通俗点来说:left值越大,元素越向右测移动 |
right | 定位元素和定位位置右测的距离, 通俗点来说:right值越大,元素越向左测移动 |
bottom | 定位元素和定位位置下边的距离,通俗点来说:left值越大,元素越向上测移动 |
用法示例:top:100px;
四、定位的组成
定位=定位模式+偏移量
定位模式用于指定一个元素在文档中的定位方式,偏移量则是指定元素的最终位置
五、定位的特点
1.相对定位
- 元素相对于其原先位置移动
- 元素开启相对定位后,如果不设置偏移量则不会发生变化
- 相对定位不会使元素脱离文档流
- 相对定位会提升元素的层级
2.绝对定位
- 开启绝对定位后,不设置偏移量则不会发生变化
- 开启绝对定位后,元素会从文档流脱离
- 改变元素的性质,行内元素会变成块状元素,块状元素的宽高被内容撑开
- .绝对定位会使元素提升一个层级
- 绝对定位是相对于最接近的一个具有定位属性的祖先元素进行定位,如果最接近的祖先元素没有定位,则依据根元素进行定位
- 开启绝对定位后 margin 0 auto无效
3.固定定位
- 跟绝对定位特点大多一样
- 唯一不同点:固定定位永远参照于浏览器的视口进行定位,就是说当页面滚动时,元素的位置不会改变
六、子绝父相
- 子级是绝对定位的话,父级要用相对定位
- 子级绝对定位,不会占有位置,可以放到盒子的任何一个地方,不会影响其他兄弟盒子。
- 父盒子需要加定位让子盒子再父盒子内显示
七、层叠关系
语法规范:选择器 { z-index : number;}
- 数值可以是正整数、负整数或0,默认是auto,数值越大,层叠级别越高,盒子越靠上,如果是负数,则将隐藏再文档流下面
- 如果相同属性值相同,则按照书写顺序,后来居上
- 数字后面不能加单位
- 注意:只有定位的盒子才有 z-index 属性