css position定位属性 – CSS高级教程-srcmini

CSS position属性定义元素在页面上的定位方式。

CSS定位方法

在网页上适当地定位元素是一个好的布局设计的必要条件，CSS中有几种方法可以用于定位元素，下面将逐一介绍这些定位方法。

静态定位元素总是根据页面的正常流进行定位。HTML元素默认定位为静态。静态定位元素不受top, bottom, left, right和z-index属性的影响。

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

相对定位元素相对于其法线位置定位。

在相对定位方案中，元件盒的位置是根据正常流量来计算的。然后根据属性top or bottom和/或left or right)将方框从正常位置移动。

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

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

绝对定位元素是相对于第一个父元素定位的，父元素的位置不是静态的。如果没有找到这样的元素，它将被定位在一个相对于浏览器窗口左上角的页面上。可以使用top, right, bottom和left的一个或多个属性进一步指定框的偏移量。

绝对定位元素完全从正常流中取出，因此在放置兄弟元素时不占用任何空间。但是，它可以根据z-index属性值重叠其他元素。此外，一个绝对定位的元素可以有边距，并且它们不会与任何其他边距一起折叠。

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

固定定位是绝对定位的一个子类。

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

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

注意：对于打印媒体类型，固定位置的元素在每个页面上呈现，并且相对于页面框固定(即使在打印预览中)。IE7和IE8只有在 <!DOCTYPE >指定时才支持。