我是谁，我在哪，我要干什么？论position属性的四个值

我是谁，我在哪，我要干什么？论position属性的四个值

**一，static **
static 元素 静态位置属性（默认属性）没有脱离文档流。
二，relative 绝对定位
相对于自身起始位置进行定位，不脱离文档流，定位之前的位置不被其他元素所占据，适用于元素微调
如下
0)
如上所示，1盒子相对定位位移过后，2盒子并没有占据1盒子原本的位置，这就是该元素不脱离文档流

三，absolute 绝对定位
相对于祖级父元素中具有position属性且值不为static的元素，进行绝对定位，如果所有属性都没有该属性，那么就相对body进行定位，定位后元素自身脱离文档流，位置被其他元素占据，元素大小为内容大小。
如上所示，1盒子原本的位置被2盒子占据，1盒子脱离文档流，但是为什么会出现1盒子在粉色大盒子之外呢，原因很简单，因为他的祖籍元素中没有position属性，所以1盒子直接相对于body进行了绝对定位，如果想让1盒子在粉色大盒子里面定位只需要在粉色大盒子里面也就是1盒子的父元素里面添加一个position属性就可以了


四，固定定位

相对于视图窗口进行定位，元素自身脱离文档流，原本的位置被其他元素占据，元素有原来的大小默认100%变为内容大小，尽可量小。

• top. 目标元素距离视图窗口顶部，值小于零继续往上走 值大于零往下走
• bottom 目标元素距离视图窗口底部，值小于零继续往下走 值大于零往上走
• right 目标元素距离视图窗口右侧，值小于零继续往右走 值大于零往左走
• left 目标元素距离视图窗口底部，值小于零继续往左走 值大于零往右走