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

上一章CSS高级教程请查看:css元素的可视属性visibility
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; }

【css position定位属性 – CSS高级教程】注意:对于打印媒体类型,固定位置的元素在每个页面上呈现,并且相对于页面框固定(即使在打印预览中)。IE7和IE8只有在 < !DOCTYPE > 指定时才支持。

    推荐阅读