CSS之定位（十一）

CSS中的定位是平时开发中用的非常频繁的，主要有相对定位、绝对定位、固定定位、粘性定位，接下来我会讲解这四种定位各自的特点以及区别。

1、前言

在 CSS 中利用 position 属性指定一个元素在文档中的定位方式，元素的定位方式有 5 种；
 
static 相当于元素没有加定位效果，如果元素加了定位，后面需要去掉，可以添加 position: static;

属性值	描述
static	没有定位，元素出现在正常的流中（默认值，可以忽略）
relative	相对定位，相对于自身正常位置进行位置的调整
absolute	绝对定位，相对于其最近的定位的父元素定位，进行位置调整
fixed	固定定位，相对于浏览器窗口进行位置调整
sticky	粘性定位，是基于用户的滚动位置来定位

2、相对定位

简介： 盒子可以 相对自己原来的位置 进行位置调整，称之为 相对定位。
 
说明： 给需要添加相对定位的元素，加上 position: relative; ；元素的位置通过位置属性进行调整位置；属性值可以是正数，也可以是负数。
 

定位的位置属性	描述
top	向下移动
bottom	向上移动
left	向右移动
right	向左移动
值可以为负数	即往规定方向相反移动

特点：

• 元素的初始位置占据的空间会被保留；
• 只不过渲染在新的地方而已&