|
本小节的标题是盒子的定位，实际上对于使用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”。
这个页面的效果如图1所示，这是一个很简单的标准流方式的两层的盒子。  图1 没有设置position属性时的状态 二、relative（相对定位） 使用relative，即相对定位，除了将position属性设置为relative之外，还需要指定一定的偏移量，承平方向通过left或者right属性来指定，竖直方向通过top和bottom来指定。下面还是通过实验的方式找到其中的规律。lodidance.com 1．实验1——个子块的情况 下面在CSS样式代码中的Box-I处，将position属性设置为relative，并设置偏移距离，代码如下。
效果如图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个属性除了可以设置为绝对的像素数，还可以设置为百分数。此时，可以看到子块的宽度依然是未移动前的宽度，撑满未移动前父块的内容。只是向右移动了，右边框超出了父块。因此，还可以得出另一个结论，当子块使用相对定位以后，它发生了偏移，即使移动到了父盒子的外面，父盒子也不会变大，就好像子盒子没有变化一样。 类似地，如果将偏移的数值设置为：
效果如图2所示。  图2 以右侧和下侧为基准设置相对定位 对于父块来说，同样没有任何影响，就好像子块没有发生过任何改变一样。因此可以总结出以下两条结论。 ● 使用相对定位的盒子．会相对于它原本的位置，通过偏移指定的距离，到达新的位置。 ● 使用相对定位的盒子仍在标准流中，它对父块没有任何影响。 2．实验2——两个子块的情况 下面讨论两个子块的情况。把上面的网页稍加改造，在父div中放两个div。首先对它们都不设置任何偏移，代码如下。
这时效果如图3所示，相应的文件位于网页学习网CSS教程资源中“第4章\11.htm“。  图3 设置为柑对定位前的效果 在代码中可以看到，现在对两个子块的设置都还空着。下面首先将Box-1盒子的CSS设置为；
将子块1的position属性设置成relative，子块2还没有设置任何与定位相关的属性。此时的效果如图3所示，与前面的图3对比，可以看到子块1的位置以自身为基准向上和向左各偏移了30像素。而子块2和前面的图3所示的相比没有任何变化，就好像子块1还在原来的位置上。  图4 两个兄弟div的情况下，其中一个设置为相对定位后的效果 这又一次验证了前面实验I中总结出的两条结论，并且需要把第2条结论再稍稍改进。因为，使用相对定位的盒子不仅对父块没有任何影响，对兄弟盒子也没有任何影响。至此，可以总结出，对于相对定位的规律是： ● 使用相对定位的盒子，会相对于它原本的位置，通过偏移指定的距离，到达新的位置。lodidance.com ● 使用相对定位的盒子仍在标准流中，它对父亲和兄弟盒子都没有任何影响。 如果同时设置两个子块的position属性都为relative，情况又会如何呢？现在把子块2也进行相应的设置，代码如下。
这时的效果如图5所示，相应的文件位于网页学习网CSS教程资源中“第4章\12.htm“。  图5 两个兄弟div都设置为相对定位后的效果 3．结论 这继续验证了上面总结的两条结论，请读者记清楚关于“相对定位”的定位原则： ● 使用相对定位的盒子，会相对于它在原本的位置，通过偏移指定的距离，到达新的位置。 ● 使用相对定位的盒子仍在标准流中，它对父块和兄弟盒子没有任何影响。 需要指出的是，上面的实验是针对标准流方式进行的，实际上，对浮动的盒子使用相对定位也是一样的，例如在4.1节中显示的3个浮动的盒子，它们都向左浮动排在一行中，如果对其中的一个盒子使用相对定位，它也同样相对于它在原本的位置，通过偏移指定的距离，到达新的位置，它旁边的Box-3仍然“以为”它还在原来的位置。
|
| 编辑：网页学习网 |
| 本文地址:http://www.lodidance.com/css/jc/675.html |
