定位
1.1为什么需要定位
定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置,并且可以压住其他盒子. ###1.2 定位的组成 定位∶将盒子定在某一个位置,所以定位也是在摆放盒子,按照定位的方式移动盒子。 定位=定位模式+边偏移。 定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。
1.2.1定位模式 定位模式决定元素的定位方式,它通过CSS的position属性来设置,其值可以分为四个:
值 | 语义 |
---|---|
static | 静态定位 |
relative | 相对定位 |
absolute | 绝对定位 |
fixed | 固定定位 |
1.2.2边偏移
边偏移就是定位的盒子移动到最终位置。有top、bottom、left和right 4个属性。 x侧偏移量,定义元素相对于其父元素x边线的距离。
静态定位不常用 相对定位是相对于自己而言,来定位的,
绝对定位是相对于父级而言,来定位
固定定位是相对于整个页面固定来定位的
点击查看代码
```绝对定位不符合标准流,不在占有预先的位置
1.3子绝父相的由来
子级绝对定位,不会占有位置,可以放到父盒子里面的任何一个地方,不会影响其他的兄弟盒子。
父盒子需要加定位限制子盒子在父盒子内显示。
父盒子布局时,需要占有位置,因此父亲只能是相对定位。
应用场景:轮播图
因为父级需要占有位置,因此是相对定位,子盒子不需要占有位置,则是绝对定位
定位特性:
1.行内元素添加绝对或固定定位,可以直接设置宽度和高度
2.块内元素添加绝对或固定定位,如果不给宽度和高度,默认大小是内容的大小。