css基础-四大定位（static、relative、absolute、fixed）

一、静态static定位：文档里正常盒子的定位。

静态定位的元素不会受到 top, bottom, left, right 和z-index影响。

二、相对定位relative：盒子现在位置距离盒子原来位置有一段偏移的距离。

相对定位方式，相对于其父级元素（无论父级元素此时为何种定位方式）进行定位，准确地说是相对于其父级元素所剩余的未被占用的空间进行定位（在父元素由多个相对定位的子元素时可以看出），且会占用该元素在文档中初始的页面空间，即在使用top，bottom，left，right进行移动位置之后依旧不会改变其所占用空间的位置。可以使用z-index进行在z轴方向上的移动。

三、绝对定位absolute：盒子脱离html文档，相对于某一个拥有（相对定位和绝对定位）的父盒子来定位，如果盒子的父元素都没有（相对定位和绝对定位），它相对于根元素html来定位,(必须写默认的left值和top值,否则它的位置还在原来的位置.)

用绝对定位,一个元素可以放在页面上的任何位置,绝对定位方式，脱离文档流，不会占用页面空间。以最近的不是static定位的父级元素作为参考进行定位，如果其所有的父级元素都是static定位，那么此元素最终则是以当前窗口作为参考进行定位。可以使用top，bottom，left，right进行位置移动，亦可使用z-index在z轴上面进行移动。当元素为此定位时，如果该元素为内联元素，则会变为块级元素，即可以直接设置其宽和高的值；如果该元素为块级元素，则其宽度会由初始的100%变为auto。

注意：当元素设置为绝对定位时，在没有指定top，bottom，left，right的值时，他们的值并不是0，这几个值是有默认值的，默认值就是该元素设置为绝对定位前所处的正常文档流中的位置。

四、 固定定位fixed：(一种特殊的绝对定位,也要写默认值)盒子相对于浏览器可视区域来定位。

固定定位和绝对定位一样，是完全脱离文档流的，不同的是，固定定位是相对于浏览器窗口，所以它不会随着页面而滚动

五、四个偏移属性：上偏移：top，right：右偏移，bottom：下偏移，left：左偏移。

总结：只有将元素的position设定为relative、absolute、或者fixed的时候，这个元素的top、bottom、right、left属性才会起作用。

六、 Z-index（层级）只作用于绝对定位和固定定位，z-index（层级）大的显示在 前面。(可以无限大)