p
o
s
i
t
i
o
n
position
position属性有四个值:
1.
1.
1. static
默认值,无定位,无top
,bottom
,left
,right
设定值效果
.static{
background-color: skyblue;
position: static;
width: 360px;
height: 360px;
}
2.
2.
2. absolute
,根据top
bottom
left
right
设置值以absolute
或relative
或body
作为标准进行位置确定
.absolute{
background-color: skyblue;
position: absolute;
width: 240px;
height: 240px;
right: 80px;
bottom: 60px;
}
3.
3.
3. relative
相对于static
,具备top
bottom
left
right
的设定,同时可以让子元素根据他的位置去定位
.relative{
background-color: skyblue;
position: relative;
width: 360px;
height: 360px;
top: 60px;
left: 150px;
}
4.
4.
4. fixed
对于页面,即使滚动该具备该属性的元素也不会移动,如果设置了top
bottom
left
right
,则会在滚动后最远停留在滚动位置,而不会超出设定的位置
.fixed{
background-color: skyblue;
width: 240px;
height: 240px;
left: 80px;
bottom: 60px;
}