CSS定位

1、定位和浮动
定位：允许你定义一个元素相对于其他正常元素的位置，它应该出现在哪里，这里的其他元素可以是父元素，另一个元素甚至是浏览器窗口本身。
浮动：浮动是脱离文本流，单独成列。
2、定位的六个属性：

• static(默认)：元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分；行内元素则会创建一个或多个行框，置于其父元素中。

• relative：元素框相对于之前正常文档流中的位置发生偏移，并且原先的位置仍然被占据。发生偏移的时候，可能会覆盖其他元素。

• absolute：元素框不再占有文档流位置，并且相对于包含块进行偏移(所谓的包含块就是最近一级外层元素position不为static的元素)，
  
  
  包移块的意思：
  

• fixed：元素框不再占有文档流位置，并且相对于视窗进行定位

• sticky：(这是css3新增的属性值)粘性定位，官方的介绍比较简单，或许你不能理解。其实，它就相当于relative和fixed混合。最初会被当作是relative，相对于原来的位置进行偏移；一旦超过一定阈值之后，会被当成fixed定位，相对于视口进行定位。

3、为什么div包不了？
因为使用的脱离文件流的东西：float absolate; div包含的文件流内的东西。注意看控制台里的代码。
position的默认值是static，（也就是说对于任意一个元素，如果没有定义它的position属性，那么它的position:static）
　　如果你想让这个#demo里的一个div#sub相对于#demo定位在右上角的某个地方，应该给#demo相对定位，#sub绝对定位。
　　absolute是相对于自己最近的父元素来定位的，如果你不给#demo相对定位，那么#sub的绝对定位就是相对于body来定位的。
　　relative是相对于自己来定位的，例如：#demo{position:relative;top:-50px;},这时#demo会在相对于它原来的位置上移50px。
　　static: 默认值。无特殊定位，对象遵循HTML定位规则;
　　absolute: 将对象从文档流中拖出,使用left,right,top,bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象,则依据body对象。而其层叠通过z-index属性定义;
　　fixed:未支持。对象定位遵从绝对(absolute)方式。但是要遵守一些规范;
　　relative:对象不可层叠，但将依据 left,right,top,bottom 等属性在正常文档流中偏移位置;