个性化阅读
专注于IT技术分析

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;
}

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

赞(0)
未经允许不得转载:srcmini » css position定位属性 – CSS高级教程
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!