CSS课程:4.2 盒子的定位

2012-07-05

CSS教程:4.2 盒子的定位本小节的标题是盒子的定位，实际上对于使用CSS对网页布局这个大主题来说．“定位”这个

CSS教程:4.2 盒子的定位

本小节的标题是盒子的定位，实际上对于使用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">

</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

热点排行