绝对定位:position:absolute;主要是通过设置对象的top,right,bottom,left四个方向的边距值来实现。一旦对象采用了绝对定位,它就完全摆脱了文档流与浮动模型,独立存在。
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>绝对定位</title>
<style type="text/css">
#a,#b,#c,#d{background-color:#eee;border:2px solid #aaa;width:100px;height:100px;margin:10px 10px;float:left;}
#b{position:absolute;top:80px;left:140px;z-index:1;}
#d{position:absolute;top:80px;left:120px;z-index:0;}
/*此时b,d元素的位置由top值及left值而决定,分别相对于浏览器窗口的上边距与左边距*/
</style>
</head>
<body>
<div id="a">a</div>
<div id="b">b</div>
<div id="c">c</div>
<div id="d">d</div>
</body>
</html>
深度(z-index):当元素出现“重叠”的时候,可以设置z-index属性,z-index的值越大,显示在越上面。
相对定位:其实它是浮动定位与绝对定位的扩展方式。相对定位使得被设置的元素保持与其原始位置相对,并不破坏其原始位置信息。
比如:当元素b设置为相对定位时,它将相对于自身的原始位置进行定位;而原来的占位信息仍然存在。
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>相对定位</title>
<style type="text/css">
#a,#b,#c,#d{width:100px;height:100px;background-color:#eee;border:2px solid #aaa;margin:10px 10px;float:left;}
#b{position:relative;left:50px;top:80px;}
</style>
</head>
<body>
<div id="a">a</div>
<div id="b">b</div>
<div id="c">c</div>
<div id="d">d</div>
</body>
</html>
注意:当对b进行绝对定位后,b就失去了占位信息,其它元素流动到b元素位置。举例如下:“不占位的相对定位”。当父级对象设置为相对定位后,而子级对象设置为绝对定位,父级对象必须指定有限的宽度跟高度值,这样子集对象才能判断自己的left及top值。
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>不占位的相对定位</title>
<style type="text/css">
#divGroup{margin:50px 0 0 50px;position:relative;border:2px solid #000;width:450px;height:200px;}
#a,#b,#c,#d{background-color:#eee;border:2px solid #aaa;width:100px;height:100px;margin:2px 2px;float:left;}
#b{position:absolute;top:30px;left:10px;}
</style>
</head>
<body>
<div id="divGroup">
<div id="a">a</div>
<div id="b">b</div>
<div id="c">c</div>
<div id="d">d</div>
</div>
</body>
</html>