CSS 中的 position 属性可用于设置网页元素的定位方式。通过改变position属性的取值,可以实现元素在页面上的不同定位效果。那么,position属性具体有哪些取值,分别表达什么含义呢?下面我们来一探究竟。
position 属性可设置为四个值,分别是 static、relative、absolute、fixed。
其中,static为默认值,表示元素按照文档流进行布局,不受top、bottom、left、right等属性的影响;
relative告诉浏览器相对于元素自身原来的位置进行偏移;
absolute告诉浏览器相对于其父元素的位置进行偏移,如果没有找到该元素的父元素,则相对于body元素进行偏移;
fixed则相对于窗口进行偏移,元素不会随着页面滚动而移动。
接下来,我们通过示例来看一下position属性的具体应用:
<style>
.box {
width: 200px;
height: 200px;
background-color: #ccc;
}
.relative {
position: relative;
left: 50px;
top: 50px;
}
.absolute {
position: absolute;
left: 50px;
top: 50px;
}
.fixed {
position: fixed;
right: 0;
bottom: 0;
}
</style>
<div class="box relative">relative定位</div>
<div class="box absolute">absolute定位</div>
<div class="box fixed">fixed定位</div>
在上述示例中,我们定义了一个.box的样式,用于作为演示用的元素,并为三个不同的元素分别应用了relative、absolute、fixed这三种取值。
你会发现,除了.static以外,其它三个元素都进行了偏移,并且随着页面滚动而变化。