CSS Position(定位)

CSS position属性用来指定元素如何在页面上定位，CSS Position(定位)的方式有以下几种：静态定位（static），绝对定位（absolute），相对定位（relative），固定定位（fixed）。

CSS定位方法

在网页上适当定位元素对于良好的布局设计是必要的。CSS中有几种方法可用于定位元素。下一节将逐一介绍这些定位方法。

静态定位（static）

始终根据页面的正常流程来定位静态定位的元素。HTML元素默认情况下处于静态位置。静态定位的元素不影响由top，bottom，left，right，和z-index特性。

如果没有指定元素的position属性值，也就是默认情况下，元素是静态定位。只要是支持position属性的html对象都是默认为static。static是position属性的默认值，它表示块保留在原本应该在的位置，不会重新定位。

说白了，平常我们根本就用不到"position:static"，不过有时候我们使用javascript来控制元素定位的时候，如果想要使得其他定位方式的元素变成静态定位，就要使用"position:static;"来实现。

.box {
    padding: 20px;
    background: #7dc765;
}

相对定位（relative）

相对定位的元素相对于其正常位置进行定位。

在相对定位方案中，元素的框位置是根据正常流计算的。然后根据属性top或bottom和right或left将框从该正常位置移开。

.box {
    position: relative;
    left: 100px;
}

注意： 相对定位的元素可以移动并与其他元素重叠，但是在正常流程中会保留最初为其保留的空间。

绝对定位（absolute）

绝对定位的元素相对于具有非静态位置的第一个父元素定位。如果找不到此类元素，则将其放置在相对于浏览器窗口"左上角"的页面上。框的偏移进一步可使用的属性的一个或多个指定top，right，bottom，和left。

绝对定位的元素将完全从正常流中移出，因此在放置同级元素时不会占用空间。但是，取决于z-index属性值，它可以与其他元素重叠。此外，绝对定位的元素可以具有margin，并且它们不会与其他任何margin一起折叠。

.box {
    position: absolute;
    top: 200px;
    left: 100px;
}

固定定位（fixed）

固定定位是绝对定位的子类别。

唯一的区别是，固定定位的元素相对于浏览器的视口是固定的，并且在滚动时不会移动。

.box {
    position: fixed;
    top: 200px;
    left: 100px;
}

注意： 在打印介质类型的情况下，固定放置的元素会在每个页面上呈现，并且相对于页面框是固定的（即使在打印预览中）。IE7和IE8仅在指定a的情况下支持固定值。

引用

菜鸟教程