参考文章:http://hi.baidu.com/_open_/blog/item/c45f31d17f971c3b9a502711.html
position:absolute的div不挤占页面其他元素空间,悬浮于其上
position:relative 挤占页面其他元素空间
下面几个例子,运行下即知区别。
例1:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>div定位测试</title>
</head>
<body>
<div id ="divFirst" style ="400px; height:50px;background-color:#FF00FF;">这里是divFirst</div>
<div id ="divSecond" style ="400px; height:50px;background-color:#01DFD7;">这里是divSecond</div>
<p><font color="#FF0000">*</font> 在普通的文档流中,div块级元素是自上而下依次排列的</p>
</body>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>div定位测试</title>
</head>
<body>
<div id ="divFirst" style ="400px; height:50px;background-color:#FF00FF;">这里是divFirst</div>
<div id ="divSecond" style ="400px; height:50px;background-color:#01DFD7;">这里是divSecond</div>
<p><font color="#FF0000">*</font> 在普通的文档流中,div块级元素是自上而下依次排列的</p>
</body>
</html>
例2:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>div定位测试2</title>
</head>
<body>
<div id ="divFirst" style ="400px; height:50px;background-color:#FF00FF;">这里是divFirst</div>
<div id ="divSecond" style ="400px; height:50px;background-color:#01DFD7; position:absolute; top:20px; left:50px;">这里是divSecond</div>
<div id ="divThird" style ="400px; height:50px;background-color:#FFFF00;">这里是divThird</div>
</body>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>div定位测试2</title>
</head>
<body>
<div id ="divFirst" style ="400px; height:50px;background-color:#FF00FF;">这里是divFirst</div>
<div id ="divSecond" style ="400px; height:50px;background-color:#01DFD7; position:absolute; top:20px; left:50px;">这里是divSecond</div>
<div id ="divThird" style ="400px; height:50px;background-color:#FFFF00;">这里是divThird</div>
</body>
</html>
例3:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>div定位测试3</title>
</head>
<body>
<div id ="divFirst" style ="400px; height:50px;background-color:#FF00FF;">这里是divFirst</div>
<div id ="divSecond" style ="400px; height:50px;background-color:#01DFD7; position:relative; top:20px; left:50px;">这里是divSecond</div>
<div id ="divThird" style ="400px; height:50px;background-color:#FFFF00;">这里是divThird</div>
</body>
</html>
<head>
<title>div定位测试3</title>
</head>
<body>
<div id ="divFirst" style ="400px; height:50px;background-color:#FF00FF;">这里是divFirst</div>
<div id ="divSecond" style ="400px; height:50px;background-color:#01DFD7; position:relative; top:20px; left:50px;">这里是divSecond</div>
<div id ="divThird" style ="400px; height:50px;background-color:#FFFF00;">这里是divThird</div>
</body>
</html>
例4:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>div定位测试2</title>
</head>
<body>
<div id ="divFirst" style ="400px; height:100px;background-color:#FF00FF;">这里是divFirst</div>
<div id ="divSecond" style ="400px; height:100px;background-color:#01DFD7;">这里是divSecond</div>
<div id ="divThird" style ="400px; height:100px;background-color:#FFFF00;">这里是divThird</div>
<div id ="divFourth" style ="400px; height:100px;background-color:#01DF01;">
<div id ="divFifth" style ="100px; height:20px;background-color:#FF8000; top:20px; left:60px; position:absolute;">这里是divFifth</div>
</div>
</body>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>div定位测试2</title>
</head>
<body>
<div id ="divFirst" style ="400px; height:100px;background-color:#FF00FF;">这里是divFirst</div>
<div id ="divSecond" style ="400px; height:100px;background-color:#01DFD7;">这里是divSecond</div>
<div id ="divThird" style ="400px; height:100px;background-color:#FFFF00;">这里是divThird</div>
<div id ="divFourth" style ="400px; height:100px;background-color:#01DF01;">
<div id ="divFifth" style ="100px; height:20px;background-color:#FF8000; top:20px; left:60px; position:absolute;">这里是divFifth</div>
</div>
</body>
</html>