css的postion的fixed和absolute的区别

css的postion的fixed和absolute的区别:
一提到css中定位马上就会想到绝对定位和相对定位,其实绝对定位还可以继续细分为两种:

position:fixed;
position:absolute;

 下面就简单介绍一下两者的相同点和区别是什么:

1.两者都脱离了文档流,可以使用left或者right等属性进行定位。
2.absolute的绝对定位的元素会随着滚动条滚动,fixed的绝对定位会固定于最初的位置。
代码实例:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>table细线表格-蚂蚁部落</title> 
<style type="text/css">  
body{
  margin:0px;
  padding:0px;
  height:1000px;
}
#left{
  height:50px;
  width:50px;
  background:green;
  position:fixed;
  left:0px;
  top:100px;
}
#right{
  height:50px;
  width:50px;
  background:green;
  position:absolute;
  right:0px;
  top:100px;
}
</style>  
</head>  
<body>  
<div id="left"></div>
<div id="right"></div>
</body>  
</html>

 上面的代码演示了两者的区别,一目了然,这里就不多介绍了。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=14213

更多内容可以参阅:http://www.softwhy.com/divcss/

猜你喜欢

转载自softwhy.iteye.com/blog/2270461
今日推荐