CSS的定位属性（使用小结）

CSS有定位有三种：(不加position的则算作无定位)

    （1）relative    （2）absolute    （3）fixed

有定位属性的元素完全脱离文档流（类似于float）

===========一般来说父元素都把position:relative写上，对于结果是没影响的，但是对于子元素定位意义重大绕了很多弯路后，本人强烈建议设置了position之后务必要设置top、bottom、left、right之中的两个，否则position无效果（补充在最后↓）

1）relative

参照元素本来的位置进行位移；原空间保留，（这里可理解为就是无定位元素，只是多了个移动位置的功能，margin移动位置功能是要改变所占空间大小的）
===========
2）absolute
参照父级：有定位属性的父级元素进行定位，原本位置消失。（tips：新手往往会在一个 >没有定位属性< 的 >块级元素< 里面，想写一个不占空间的块级元素，结果定位却不是以这个父级元素为基准，所以平时写块级元素可以加一个position：relative;既有标准文档流的空间位置，又可以作为下一个元素或子元素的定位基准）。
简单的使用就理解为，找寻最近的一个有定位属性的父元素作为定位基准（top/bottom、left/right使用默认的话，那结果就会完全欺骗到你）
===========
3）fixed
参照浏览器窗口进行定位，而不是页面（自行尝试理解）

position与float相同的是：

①脱离文档流
②无margin塌陷现象

position区别于float的是：

①可以不改变自身大小进行位置改变（top、bottom、left、right）
②可以互相覆盖（对于无定位的元素，包括float，如果重叠则直接覆盖），且拥有特殊属性Z-index（较大值覆盖较小值）。如果没有index属性则后来者居上

最后，定位元素的从父现象（父元素z-index足够小，但是里面的z-index足够大）？
float不是一个定位属性，可以参看下面的测试（补充↓）

<div style="float:right;border:100px solid black;">    <div style="position:absolute;border:100px solid red;"></div></div><div style="float:right;border:100px solid black;">    <div style="position:absolute;border:100px solid red;left:0"></div></div>