本小节的标题是盒子的定位，实际上对于使用CSS对网页布局这个大主题来说．“定位”这个词本身有两种含义。
● 广义的“定位”：要将某个元素故到某个位置的时候，这个动作可以称为定位操作，可以使用任何CSS规则来实现，这就是泛指的一个网页排版中的定位操作，使用传统的表格排版时，同样存在定位的问题。
● 狭义的“定位”：在CSS中有一个非常重要的属性position，这个单词翻译为中文也是定位的意思，然而受使CSS进行定位操作并不仅仅通过这个属性来实现，因此不要把二者混淆。
首先，对position属性的使用方法做一个概述，后面再具体举例子说明。position属性可以设置为4个属性值之一。
● static:这是默认的属性值，也就是该盒子按照标准流（包括浮动方式）进行布局。
● reIative：称为相对定位。使用相对定位的盒子的位置常以标准流的排版方式为基础，然后使盒子相对于它在原本的标准位置偏移指定的距离。相对定位的盒子仍在标准流中，它后面的盒子仍以标准流方式对待它。
● absolute:绝对定位，盒子的位置以它的包含框为基准进行偏移。，绝对定位的盒子从标准流中脱离。这意味着它们对其后的兄弟盒子的定位没有影响，其他的盒子就好像这个盒子不存在一样。
● fixed:称为固定定位，它和绝对定位类似，只是以浏览器窗口为基准进行定位，也就是当拖动浏览器窗口的滚动条时，依然保持对象位置不变。
读者可能会觉得这4条属性值不太易于理解，这一节的任务就是彻底搞懂它们的含义。
position定位与float-样，也是CSS排版中非常重要的概念。position从字面意思上看就是指定块的位置，即块相对于其父块的位置和相对于它自身应该在的位置。
一、static（静态定位）
static为默认值，它表示块保持在原本应该在的位置上，即该值没有任何移动的效果。因此，前面的所有例子实际上都是static方式的结构，这里就不再介绍了。
为了讲解清楚后面的其他比较复杂的定位方式，也像上一节一样，使用一系列实验的方法，目标是通过实验的方法找出规律。
这里首先给出最基础的代码，也就是没有设置任何position属性，相当于使用staLic方式的页面．，相应的文件位于网页学习网CSS教程资源中“第4章\09.htm”。
<!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>网页学习网--position属性</title>
<style type="text/css">
body{
margin:20px;
font :Arial 12px;
}
#father{
background-color:#a0c8ff;
border:1px dashed #000000;
padding:15px;
}
#block1{
background-color:#fff0ac;
border:1px dashed #000000;
padding:10px;
}
</style>
</head>
<body>
<div id="father">
<div id="block1">Box-1</div>
</div>
</body>
</html>
这个页面的效果如图1所示，这是一个很简单的标准流方式的两层的盒子。
图1 没有设置position属性时的状态
二、relative（相对定位）
使用relative，即相对定位，除了将position属性设置为relative之外，还需要指定一定的偏移量，承平方向通过left或者right属性来指定，竖直方向通过top和bottom来指定。下面还是通过实验的方式找到其中的规律。WANGYEXX.COM
1．实验1——个子块的情况
下面在CSS样式代码中的Box-I处，将position属性设置为relative，并设置偏移距离，代码如下。
#block1{
background-color:#fff0ac;
border:1px dashed #000000;
padding:10px;
position:relative; /* relative相对定位 */
left:30px;
top:30px;
}
效果如图2所示，相应的文件位于本书光盘中“第4章\10.htm”。图中显示了Box-1原来的位置和新位置的比较。可以看出，它向右和向下分别移动了30像素。也就是说，“left:30px”的作用就是使Box-1的新位置在它原来位置的左边框右侧30像素的地方，“top:30px”的作用就足使Box-1的新位置在原来位置的上边框下侧30像素的地力。
图2 一个div设置为相对定位后的效果
这4个属性只有当position属性设置为absolute、relative或fixed时才有效。而且，在position属性取值不同时，它们的含义也不同。当posiition设置为relative时，它们表示各个边界与原来位置的距离。
top、right、bottom和left这4个属性除了可以设置为绝对的像素数，还可以设置为百分数。此时，可以看到子块的宽度依然是未移动前的宽度，撑满未移动前父块的内容。只是向右移动了，右边框超出了父块。因此，还可以得出另一个结论，当子块使用相对定位以后，它发生了偏移，即使移动到了父盒子的外面，父盒子也不会变大，就好像子盒子没有变化一样。
类似地，如果将偏移的数值设置为：
right:30px;
bottom:30px;
效果如图2所示。
图2 以右侧和下侧为基准设置相对定位
对于父块来说，同样没有任何影响，就好像子块没有发生过任何改变一样。因此可以总结出以下两条结论。
● 使用相对定位的盒子．会相对于它原本的位置，通过偏移指定的距离，到达新的位置。
● 使用相对定位的盒子仍在标准流中，它对父块没有任何影响。
2．实验2——两个子块的情况
下面讨论两个子块的情况。把上面的网页稍加改造，在父div中放两个div。首先对它们都不设置任何偏移，代码如下。
<!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-Language" content="zh-cn" />
<title>网页学习网--position属性</title>
<style type="text/css">
<!--
body{
margin:20px;
font-family:Arial;
font-size:12px;
}
#father{
background-color:#a0c8ff;
border:1px dashed #000000;
padding:15px;
}
#father div{
background-color:#fff0ac;
border:1px dashed #000000;
padding:10px;
}
#block1{
}
#block2{
}
-->
</style>
</head>
<body>
<div id="father">
<div id="block1">Box-1</div>
<div id="block2">Box-2</div>
</div>
</body>
</html>
这时效果如图3所示，相应的文件位于网页学习网CSS教程资源中“第4章\11.htm“。
图3 设置为柑对定位前的效果
在代码中可以看到，现在对两个子块的设置都还空着。下面首先将Box-1盒子的CSS设置为；
#block1{
position:relative;
bottom:30px;
right:30px;
}
将子块1的position属性设置成relative，子块2还没有设置任何与定位相关的属性。此时的效果如图3所示，与前面的图3对比，可以看到子块1的位置以自身为基准向上和向左各偏移了30像素。而子块2和前面的图3所示的相比没有任何变化，就好像子块1还在原来的位置上。
图4 两个兄弟div的情况下，其中一个设置为相对定位后的效果
这又一次验证了前面实验I中总结出的两条结论，并且需要把第2条结论再稍稍改进。因为，使用相对定位的盒子不仅对父块没有任何影响，对兄弟盒子也没有任何影响。至此，可以总结出，对于相对定位的规律是：
● 使用相对定位的盒子，会相对于它原本的位置，通过偏移指定的距离，到达新的位置。WANGYEXX.COM
● 使用相对定位的盒子仍在标准流中，它对父亲和兄弟盒子都没有任何影响。
如果同时设置两个子块的position属性都为relative，情况又会如何呢？现在把子块2也进行相应的设置，代码如下。
#block2{
position:relative;
top:30px;
left:30px;
}
这时的效果如图5所示，相应的文件位于网页学习网CSS教程资源中“第4章\12.htm“。
图5 两个兄弟div都设置为相对定位后的效果
3．结论
这继续验证了上面总结的两条结论，请读者记清楚关于“相对定位”的定位原则：
● 使用相对定位的盒子，会相对于它在原本的位置，通过偏移指定的距离，到达新的位置。
● 使用相对定位的盒子仍在标准流中，它对父块和兄弟盒子没有任何影响。
需要指出的是，上面的实验是针对标准流方式进行的，实际上，对浮动的盒子使用相对定位也是一样的，例如在4.1节中显示的3个浮动的盒子，它们都向左浮动排在一行中，如果对其中的一个盒子使用相对定位，它也同样相对于它在原本的位置，通过偏移指定的距离，到达新的位置，它旁边的Box-3仍然“以为”它还在原来的位置。
本文地址:http://www.wangyexx.com/css/jc/675.html
分享到：
相关推荐
4.2 盒子的定位 4.2.1 static（静态定位） 4.2.2 relative（相对定位） 4.2.3 absolute（绝对定位） 4.2.4 fixed（固定定位） 4.3 z-index空间位置 4.4 盒子的display属性 4.5...
4.1.7 实验6——全部向左浮动 4.1.8 实验7——使用clear属性清除浮动的影响 4.1.9 实验8——扩展盒子的高度 4.2 盒子的定位 4.2.1 static（静态定位） 4.2.2 relative（相对定位） 4.2.3 absolute...
4.2 盒子的定位 4.2.1 static（静态定位） 4.2.2 relative（相对定位） 4.2.3 absolute（绝对定位） 4.2.4 fixed（固定定位） 4.3 z-index空间位置 4.4 盒子的display属性 4.5 本章小结 第5章 ...
第10章 理解CSS定位与div布局 10.1 div 标记与 span 标记 10.2 盒子模型 10.3 元素的定位 10.4 定位实例一：轻轻松松给图片签名 10.5 定位实例二：文字阴影效果 第11章 CSS+div布局...
第10章 理解CSS定位与div布局 10.1 div 标记与 span 标记 10.2 盒子模型 10.3 元素的定位 10.4 定位实例一：轻轻松松给图片签名 10.5 定位实例二：文字阴影效果 第11章 CSS+div...
第10章 理解CSS定位与div布局 10.1 div 标记与 span 标记 10.2 盒子模型 10.3 元素的定位 10.4 定位实例一：轻轻松松给图片签名 10.5 定位实例二：文字阴影效果 第11章 CSS+div布局...
第10章 理解CSS定位与div布局 10.1 div标记与span标记 10.1.1 概述 10.1.2 div与span的区别 10.2 盒子模型 10.2.1 盒子模型的概念 10.2.2 border 10.2.3 padding 10.2.4 margin 10.3 ...
第10章 理解CSS定位与div布局 10.1 div 标记与 span 标记 10.2 盒子模型 10.3 元素的定位 10.4 定位实例一：轻轻松松给图片签名 10.5 定位实例二：文字阴影效果 第11章 CSS+div布局...
第10章 理解CSS定位与div布局 10.1 div 标记与 span 标记 10.2 盒子模型 10.3 元素的定位 10.4 定位实例一：轻轻松松给图片签名 10.5 定位实例二：文字阴影效果 第11章 CSS+div布局...
4.2 盒子模型 4.3 元素的定位 4.3.1 float定位 4.3.2 position定位 4.3.3 z-index空间位置 4.4 CSS排版观念 4.4.1 将页面用div分块 4.4.2 设计各块的位置 4.4.3 用CSS定位 4.5 排版...
第10章 理解CSS定位与div布局 10.1 div 标记与 span 标记 10.2 盒子模型 10.3 元素的定位 10.4 定位实例一：轻轻松松给图片签名 10.5 定位实例二：文字阴影效果 第11章 CSS+div布局...
3.5 定位代码和调用堆栈 3.6 浏览器捕获异常 3.7 总结 第二部分 JavaScript核心 第4章 语言结构 4.1 JavaScript的基本文法 4.2 常量和变量 4.3 表达式和运算符符 4.4 控制语句 句 ...
9.4.8 绝对定位布局：ext.layout.container.absolute / 450 9.4.9 边框布局：ext.layout.container.border / 451 9.4.10 自动布局：ext.layout.container.auto / 453 9.4.11 表格布局：ext.layout.container....
3.4.4 元素定位... 86 3.6 习题... 88 第4章 网页数据的有效性验证... 92 4.1验证控件... 92 4.1.1 验证控件分类... 92 4.1.2 ASP页面验证控件... 92 4.2 正则表达式... 102 4.2.1常用的元字符... 102 4.2.2...