css position属性 以及 float、display的问题整合

在css中，有两个属性可以破坏文档流：一个就是float属性，另一个就是position属性。

假设一个父级元素未定义高度（默认div的宽度是100%，即最大化；高度是最小化，即如果div没有设置高度，则其虽然占据物理空间，但是在页面上显示不出来），它的高度就要由子元素来填充，这时，如果设置子元素float属性，子元素就会脱离文档流，当所有的子元素都脱离了文档流，父级元素的高度就变为0，无法显示出来，所以父级元素最好设置高度，position:absolute也同样撑不开父级元素的高度。（任何元素通过float属性都变为块元素，与display:block一样）

position属性共有五个值：static（默认值）、relative、absolute、fixed、inherit。

static属性是默认的属性，在此属性下，设置top、left、right、bottom都是无效的。

fixed属性是相对应于浏览器窗口的，一般用于右下角的广告。

inherit属性是继承父级元素的position属性。

下面是最常用的两种position属性值：

relative：元素会相对于原始的文档流进行定位，原来的物理位置没变，只不过在网页显示上发生变化。如果不设置relative的值，则相对于原始文档流正常位置的左上方定位。

absolute：使用最多的position定位，一般与float结合使用。absolute会破坏原始文档流，类似于float。absolute会根据上一个已经定位的父级元素或者爷爷级元素（上一级不是static属性的定位）开始定位，如果没找到的话，就以浏览器定位。

一般使用relative与absolute结合的方式进行定位，比如父级元素使用relative（左右上下都不设置，也可以按需求设置），块内元素使用absolute，这样，子元素只能在父块里活动。

float、display:block和absolute区别，float和display：block只是脱离了正常文档流，但是它还在父级元素的文档流内，因此只在父级元素内活动，而absolute则脱得有点大，它是相对于上一级已经定位的元素，要看上一级元素在哪，另一点区别在于，display:block使用后，元素会根据父元素的宽度调整自己的位置，如果上一行没有自己宽度的位置就会跳到下一行。而absolute定位的块元素会产生堆叠，这个时候要给所在的块元素增加一个z-index属性，其实就是规定哪个块放在最上面显示，z-index的值越大，越靠上，不设置的话auto会根据从后到前的顺序显示最后的元素。