CSS样式之定位

1.定位的边偏移

   top   顶端偏移量，定义元素相对于其父元素上边线的距离
   bottom  底部偏移量，定义元素相对于其父元素下边线的距离
   left   左侧偏移量，定义元素相对于其父元素左边线的距离
   right 右侧偏移量，定义元素相对于其父元素右边线的距离

PS:偏移量的使用，根据先上再下，先左后右的要求，使用了左边的偏移，右边就没必要加了，上下也是如此，使用一边的就行。
2.定位的模式(分类)
即position的值

   static    自动定位   默认的定位模式
   relative  相对定位  相对于其源文档流的位置进行定位
   absolute  绝对定位  相对于其上一个已经定位的父元素进行定位 
   fixed     固定定位，   性对于流浪器窗口进行定位

PS：定位模式 + 边偏移 = 完美定位
2.1静态定位
static 静态定位对边偏移是无效的，使用边偏移是不会发生变化的，还是在原来的位置，
作用：一般用它来清除定位，一个原来有定位的盒子，不想加定位了，就可以加上 position：static ;来清除定位.
2.2相对定位 relative
每次移动位置，都是相对于自己的左上角移动，换了位置，左上角也就换了。但是原来的占有的位置，继续占有。浮动是脱离标准流的，即原来的位置不会再占有，下面的盒子会顶上来，相对定位是不脱标的，，原来的位置继续占有，下面的盒子不会上来。
定位的主要价值是让移动位置，让盒子到我们想要的位置上去。
2.3绝对定位 absolute (拼爹性)
绝对定位是脱离标准流的，是完全脱标的，不占有位置。
如果父元素没有定位，子元素会以浏览器为基准进行定位。
父元素有定位，就以最近的父元素的位置为基准进行定位，如果最近的父元素没有，就一层一层的向上找，直到找到有定位的父元素（最外为浏览器）。

普通的盒子水平居中只要margin 的左右为auto即可，加了绝对定位的盒子，使用margin 左右auto是无效的。加了绝对定位的盒子首先向左或向下走父盒子的一半，然后走自己外边距负的一半就可以了，如下：

.son{
   position: absolute;
   left: 50%;
   margin-left: -50px;
}

PS:子绝父相
（1）相对定位 占有位置 不脱标
（2）绝对定位 不占有位置 完全脱标
如下图的小三角的图片轮播，孩子（小三角）是绝对定位不占位置，不然会占有图片位置，父元素加相对定位，占有位置，下面的盒子就上不来，孩子在父元素中可以随便移动位置，所以虽然可以有其他的定位方式，比如子绝父绝等，但是子绝父相用的是最常见的

PS:图片不会加在padding的位置，如果有padding 图片会在padding的里面，不会压在padding的区域内，但是加了绝对定位，并且使用top：0；left：0；进行定位，图片就会根据父元素的定位开始定位，就会压住padding。

3.固定定位
绝对定位的一种特殊形式。
1、固定定位与父元素没有关系，只认浏览器。
2、固定定位完全脱标，不占位置，不随着滚动条滚动。
4.次序的叠放
z-index:1；默认值为0 ；值越大位置在上面，可以使负数。
只有在相对，绝对，固定定位的时候，这个属性才生效。
5.模式转换问题
如果不给定宽度的话，脱标的定位，即绝对定位和固定定位，会发生模式转化，转换为行内块元素，宽度就是内容的宽度。所以说一些行内元素如果想转换为行内块元素，不用使用display: block;
添加了绝对，相对定位或者浮动就可以直接指定宽和高了。