【css】简单说一下定位

定位

引言：当我们在浏览网页上下滑动时，很多时候会发现在网页上某些图片或者文字不会随着网页的滑动而动，始终固定在视野里的某个地方。
还有不太引人注意的图片叠加在另一个图片的某个位置的情况。
比如某购物网

而这些效果都是用css中的 定位 来实现的

1.为什么使用定位

定位可以解决标准流和浮动实现不了的网页效果，它可以让盒子

1. 自由的在某个盒子里移动位置
2. 固定在屏幕的某个位置
3. 压住其他的盒子

也就是说定位也是在摆放盒子，它可以解决网页页面中的层叠样式问题，也可以让元素固定位置。

2.定位组成

定位=定位模式+边偏移
定位模式用于指定一个元素在文档中的定位方式
边偏移决定了元素最终的位置

2.1定位模式

在css中通过position属性定义元素的定位模式

选择器 { 
    position: 属性值; 
}

定位模式有

1. 静态定位 ：static （基本用不到，效果和标准流没有区别）
2. 相对定位 ：relative
   基于元素原来的位置进行偏移，并且元素在页面中占据位置（没有脱标）
3. 绝对定位：absolute
   基于最近的有定位的祖先元素进行移动，默认相对于浏览器的可视区域进行移动，并且元素在页面中不占据位置（脱标）
4. 固定定位：fixed
   基于浏览器的可是区域进行移动，在页面中不占位置（脱标）

2.2边偏移

边偏移 就是定位的盒子移动到最终位置。有 top、bottom、left 和 right 4 个属性。一般选取 临近的 两个属性即可。

定位的盒子有了边偏移才有了价值。一般情况下，有定位的盒子都要用到边偏移。

3.子绝父相

父元素用相对定位，子元素用绝对定位。
用于小盒子在大盒子中的定位
比如小盒子在大盒子中垂直水平居中就可以用子绝父相来解决。

4.定位的特性

1. 定位可以使行内元素转换为块级元素，使其可以设置宽高
2. 块级元素加了定位，若不设置宽高，则宽高由内容撑开
3. 嵌套块级元素加了绝对/固定定位，不会有塌陷问题

总结

一定记住 相对定位、固定定位、绝对定位 两个大的特点：

1. 是否占有位置（脱标否）
2. 以谁为基准点移动位置。