盒子的定位
盒子的定位有两种含义：
1.广义的“定位”：要将某个元素放到某个位置的时候，这个动作可以称为定位操作，可以使用任何CSS规则来实现，这 就是泛指的一个网页排版中的定位操作，使用传统的表格排版，同样存在定位的问题
2.狭义的“定位”：在CSS中有一个非常重要的属性position
position定位有4个属性值
(1).static 这个是默认的属性值
(2).relative：称为相对定位，相对于它在原本的标准位置偏移指定的距离
(3).absolute：绝对定位 ，以它的包含框为基准进行偏移。
(4).fixed：固定定位
例子：
a:static(静态定位）
<!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=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 20px;
}
#father {
background-color: #a0c8ff;
border: 1px dotted #000000;
}
#block1 {
background-color: #fff0ac;
border: 1px dotted #000;
padding: 10px;
left: auto;
bottom: 30px;
}
-->
</style>
</head>
<body>
<div id="father">此处显示 id "father" 的内容
<div id="block1">此处显示 id "block1" 的内容</div>
</div>
</body>
</html>
b.relative(相对定位)
<!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=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 20px;
}
#father {
background-color: #a0c8ff;
border: 1px dotted #000000;
}
#block1 {
background-color: #fff0ac;
border: 1px dotted #000;
padding: 10px;
position: relative;
right: 30px;
bottom: 30px;
}
-->
</style>
</head>
<body>
<div id="father">此处显示 id "father" 的内
<div id="block1">此处显示 id "block1" 的内容</div>
容</div>
</body>
</html>
使用相对定位的盒子，会相对于它原本的位置，通过偏移指定的距离，到达新的位置
使用相对定位的盒子仍在标准流中，它对于父块没有任何影响。
1.广义的“定位”：要将某个元素放到某个位置的时候，这个动作可以称为定位操作，可以使用任何CSS规则来实现，这 就是泛指的一个网页排版中的定位操作，使用传统的表格排版，同样存在定位的问题
2.狭义的“定位”：在CSS中有一个非常重要的属性position
position定位有4个属性值
(1).static 这个是默认的属性值
(2).relative：称为相对定位，相对于它在原本的标准位置偏移指定的距离
(3).absolute：绝对定位 ，以它的包含框为基准进行偏移。
(4).fixed：固定定位
例子：
a:static(静态定位）
<!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=gb2312" /><title>无标题文档</title><style type="text/css">
<!--body {
body font-family: Arial, Helvetica, sans-serif; font-size: 12px; margin: 20px;}#father { background-color: #a0c8ff; border: 1px dotted #000000;}#block1 { background-color: #fff0ac; border: 1px dotted #000; padding: 10px; left: auto; bottom: 30px;}--></style></head><body><div id="father">此处显示 id "father" 的内容 <div id="block1">此处显示 id "block1" 的内容</div></div></body></html><!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=gb2312" /><title>无标题文档</title><style type="text/css"><!--body { font-family: Arial, Helvetica, sans-serif; font-size: 12px; margin: 20px;}#father { background-color: #a0c8ff; border: 1px dotted #000000;}#block1 { background-color: #fff0ac; border: 1px dotted #000; padding: 10px; position: relative; right: 30px; bottom: 30px;}--></style></head><body><div id="father">此处显示 id "father" 的内 <div id="block1">此处显示 id "block1" 的内容</div>容</div></body></html>使用相对定位的盒子，会相对于它原本的位置，通过偏移指定的距离，到达新的位置
使用相对定位的盒子仍在标准流中，它对于父块没有任何影响。
