定位

如果没有定位

我们做出来的网页将会是按部就班的自上而下、自左而右的平铺在浏览器上，外加通过margin和padding调整一下间距，还有就是通过float来浮动某些元素。做一些简单的网页这样就够了，例如N年之前的yahoo，虽然现在看来很low

是有些情况下，这种按部就班的网页排版满足不了我们的要求

我们需要某些元素跑出来，悬浮在网页上面，而且需要给它指定一个位置。这时候我们就需要用到了position，而且是非用不可

position一共有五个可选属性：static / relative / absolute / fixed / inherit。

其中static（静态定位）是默认值，即所有的元素如果不设置其他的position值，它的position值就是static，有它跟没有它一样，而inherit是从父元素继承position属性的值

relative

1. relative会导致自身位置的相对变化，而不会影响其他元素的位置、大小的变化
2. 相对于其再static下的位置变化
3. relative元素的定位永远是相对于元素自身位置的，和其他元素没关系，也不会影响其他元素
4. 使用相对定位的元素不管它是否进行移动，元素仍要占据它原来的位置。移动元素会导致它覆盖其他的框

absolute

1. absolute元素脱离了文档结构。和relative不同，本身的文档元素会重新排列，比如div在static时有100px;height:100px; 但当该div为absolute定位时，原先的100px高宽就没有了，需要重新排列
2. 只要元素会脱离文档结构，它就会产生破坏性，导致父元素坍塌。（此时你应该能立刻想起来，float元素也会脱离文档结构）
3. absolute元素具有“包裹性”。之前div的宽度是撑满整个屏幕的(100%)，而此时div的宽度刚好是内容的宽度,不再时100%
4. absolute元素具有“呆滞性”（不让它动，它就不动）； 虽然absolute元素脱离了文档结构，但是它的位置并没有发生变化，还是老老实实的呆在它原本的位置，因为我们此时没有设置top、left的值
5. absolute元素会悬浮在页面上方，会遮挡住下方的页面内容， 如果有多个悬浮元素，层级如何确定？答案是“后来者居上”, 可以通过设置Ｚ-Iindex属性来控制这些框的堆放次序
6. absolute会使得inline元素被“块”化; float也会使inline元素"块"化
7. absolute会使得元素已有的float失效。不过float和absolute同时使用的情况不多
8. 浏览器会递归查找该元素的所有父元素，如果找到一个设置了position:relative/absolute/fixed的元素(即非static)，就以该元素为基准定位，如果没找到，就以浏览器边界定位

fixed

1. fixed永远根据浏览器确定位置
2. fixed元素的定位永远是相对于浏览器边界的，和其他元素没有关系。但是它具有破坏性，会导致其他元素位置的变化