css开发记录之position

position

static

默认值是static，即没有指定position属性值的元素的这个属性都是取默认值static的，表示非定位元素

relative

相对定位，相对于自己static的时候的位置，进行偏移。left表示要左边要空出多少。

例子：

此时，三个都是static的，修改蓝色部分position为relative，left=40px；top=20px，效果如下

修改后，因为只是针对自己static位置的，不影响其他元素，比如绿色区域没动，蓝色部分覆盖了绿色部分

层概念

都是static的时候，在布局流里面，后面的位于前面的上层，比如我们在都是static的情况下，设置绿色部分为margin-top=-40px；效果如下：

明显的绿色覆盖了蓝色部分，因为在布局流里面，绿色的在后面

但是再看前面蓝色设置为relative的部分，蓝色覆盖了绿色，也就是说设置position属性是非static的，会在static的上层

这里说的层是z轴层

z-index

这是另一种调整层的方式，z轴，也就是垂直于屏幕的轴。

这个属性只有在position属性是非static的时候才有效，且值越大的，z轴上越靠前。也就是说值大的会在值小的上层

一般的，如果要通过这个属性来调整层的话，将他们都设置为relative的，然后再设置z-index的值

absolute

绝对定位

在父级容器都是static的时候，相对于最高级的父级元素定位

我们定义蓝色部分position为absolute，他就是非static的，就是一个定位元素，位于static元素的上层

我们继续设置蓝色区域的left=20，top=30，效果如下。

因为父级元素都是static的，所以它会对于最顶层的父级元素进行定位（比如一般的页面，会找到最高层的html标签），且范围是是当前浏览器中，一屏可视的页面内容区域。

父级容器有非static的时候，相对于最近的父元素做定位

也就是说，如果父级元素和爷爷级元素都是非static的时候，它只会去找父级元素的当前可视范围作为定位标准

fixed

相对于浏览器视口做定位的。也就是即使页面滚动，也不影响在浏览器视口中的位置。

小结：

理解两个概念：

1. 设置position为非static的时候，相当于自己单独一层
2. 相对于谁来设置了定位，是自己static时候的位置？还是父级容器的可视范围？还是浏览器的可视范围