CSS Position(定位)

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

CSS定位方法

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

静态定位(static)

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

如果没有指定元素的position属性值,也就是默认情况下,元素是静态定位。只要是支持position属性的html对象都是默认为static。static是position属性的默认值,它表示块保留在原本应该在的位置,不会重新定位。
说白了,平常我们根本就用不到“position:static”,不过有时候我们使用javascript来控制元素定位的时候,如果想要使得其他定位方式的元素变成静态定位,就要使用“position:static;”来实现。

.box {
    padding: 20px;
    background: #7dc765;
}
测试看看‹/›

相对定位(relative)

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

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

.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的情况下支持固定值。