相对定位:
与static定位相同,不会脱离文档流,也不会改变盒类型,行内元素不会变为块级元素。相对定位根据原先的位置进行偏移,也就是自身的位置,并且原先占用的空间会继续保留。
下面对相对定位的例子,即便设置了span的宽高但不会生效。
绝对定位:
会脱离文档流,并会将元素变成块级元素。元素被设定为绝对定位后,其原先占用的空间会被删除,他的包含快就是离他最近的position属性不为static的祖先元素的内容区域。
下面对绝对定位的例子,div元素变成了span的包含块,并且由于span元素的盒类型已经改变(变为块级元素),所以宽高是生效的。而且span元素后的文本会占据他原来的空间。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>无标题文档</title>
<style>
.div1{
border:1px solid red;
width:500px;
height:100px;}
.div1 span{
position:relative;
top:10px;
left:20px;
width:70px;
height:50px;
}
.div2{
position:relative;
border:1px solid green;
width:500px;
height:100px;}
.div2 span{
position:absolute;
height:50px;
width:70px;
top:10px;
left:20px;
}
span{
background:#933;
}
</style>
</head>
<body>
<div class="div1">
改变相对定位位置,改变
<span>相对位置定位</span>
,改变相对定位的位置
</div>
<hr/>
<div class="div2" >
改变绝对位置,改变
<span >绝对定位的位置</span>
,改变绝对定位的位置
</div>
</div>
</body>
</html>
效果图:
固定位置:
除了IE6,7不支持,其余都支持,类似于绝对定位,但又不同,它的包含块是根据当前视口决定的。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>position-fixed</title>
<style>
.div3{
border:1px solid skyblue;
width:500px;
height:100px;}
.div3 span{
position:fixed;
height:50px;
width:70px;
top:10px;
left:20px;
background:#CCC;
}
</style>
</head>
<body>
<div class="div3">
改变固定位置,改变
<span>固定定位的位置</span>
,改变固定定位的位
</body>
</html>
效果图:
span相对于视口top:10px;left:20px;它将固定在这个位置,几十页面滚动也不会消失。
固定定位通常会偏移到父元素外面,相当于内容溢出。即便给父元素设置超出部分隐藏(overflow:hidden),固定定位的元素也不会被裁减,但换成绝对定位,就会被裁剪。
注意:给固定位置和绝对定位的元素设置浮动时,元素浮动是不会生效的。