首页 > 代码库 > 4.2 盒子的定位

4.2 盒子的定位

2024-07-08 20:33:49   228人阅读

本小节的标题是盒子的定位，实际上对于使用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. <!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  3. <html xmlns="http://www.w3.org/1999/xhtml"> 
  4. <head> 
  5. <title>网页学习网--position属性</title> 
  6. <style type="text/css"> 
  7. body{  
  8.     margin:20px;  
  9.     font :Arial 12px;  
  10. }  
  11. #father{  
  12.     background-color:#a0c8ff;  
  13.     border:1px dashed #000000;  
  14.     padding:15px;  
  15. }  
  16.  
  17. #block1{  
  18.     background-color:#fff0ac;  
  19.     border:1px dashed #000000;  
  20.     padding:10px;  
  21. }  
  22. </style> 
  23. </head> 
  24. <body> 
  25.     <div id="father"> 
  26.         <div id="block1">Box-1</div> 
  27.     </div> 
  28. </body> 
  29. </html> 

这个页面的效果如图1所示，这是一个很简单的标准流方式的两层的盒子。

图1 没有设置position属性时的状态
图1 没有设置position属性时的状态

二、relative（相对定位）

使用relative，即相对定位，除了将position属性设置为relative之外，还需要指定一定的偏移量，承平方向通过left或者right属性来指定，竖直方向通过top和bottom来指定。下面还是通过实验的方式找到其中的规律。lodidance.com

1．实验1——个子块的情况

下面在CSS样式代码中的Box-I处，将position属性设置为relative，并设置偏移距离，代码如下。

  1. #block1{  
  2.     background-color:#fff0ac;  
  3.     border:1px dashed #000000;  
  4.     padding:10px;  
  5.     position:relative;      /* relative相对定位 */ 
  6.     left:30px;  
  7.     top:30px;  
  8. } 

效果如图2所示，相应的文件位于本书光盘中“第4章\10.htm”。图中显示了Box-1原来的位置和新位置的比较。可以看出，它向右和向下分别移动了30像素。也就是说，“left:30px”的作用就是使Box-1的新位置在它原来位置的左边框右侧30像素的地方，“top:30px”的作用就足使Box-1的新位置在原来位置的上边框下侧30像素的地力。

图2 一个div设置为相对定位后的效果
图2 一个div设置为相对定位后的效果

这4个属性只有当position属性设置为absolute、relative或fixed时才有效。而且，在position属性取值不同时，它们的含义也不同。当posiition设置为relative时，它们表示各个边界与原来位置的距离。

top、right、bottom和left这4个属性除了可以设置为绝对的像素数，还可以设置为百分数。此时，可以看到子块的宽度依然是未移动前的宽度，撑满未移动前父块的内容。只是向右移动了，右边框超出了父块。因此，还可以得出另一个结论，当子块使用相对定位以后，它发生了偏移，即使移动到了父盒子的外面，父盒子也不会变大，就好像子盒子没有变化一样。

类似地，如果将偏移的数值设置为：

  1. right:30px;  
  2. bottom:30px; 

效果如图2所示。

图2 以右侧和下侧为基准设置相对定位
图2 以右侧和下侧为基准设置相对定位

对于父块来说，同样没有任何影响，就好像子块没有发生过任何改变一样。因此可以总结出以下两条结论。

● 使用相对定位的盒子．会相对于它原本的位置，通过偏移指定的距离，到达新的位置。

● 使用相对定位的盒子仍在标准流中，它对父块没有任何影响。

2．实验2——两个子块的情况

下面讨论两个子块的情况。把上面的网页稍加改造，在父div中放两个div。首先对它们都不设置任何偏移，代码如下。

  1. <!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN"   
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  3. <html xmlns="http://www.w3.org/1999/xhtml"> 
  4. <head> 
  5. <meta http-equiv="Content-Language" content="zh-cn" /> 
  6. <title>网页学习网--position属性</title> 
  7. <style type="text/css"> 
  8. <!--  
  9. body{  
  10.     margin:20px;  
  11.     font-family:Arial;  
  12.     font-size:12px;  
  13. }  
  14. #father{  
  15.     background-color:#a0c8ff;  
  16.     border:1px dashed #000000;  
  17.     padding:15px;  
  18. }  
  19. #father div{  
  20.     background-color:#fff0ac;  
  21.     border:1px dashed #000000;  
  22.     padding:10px;  
  23.     }  
  24.  
  25. #block1{  
  26. }  
  27.  
  28. #block2{  
  29. }  
  30. --> 
  31. </style> 
  32. </head> 
  33. <body> 
  34.     <div id="father"> 
  35.         <div id="block1">Box-1</div> 
  36.         <div id="block2">Box-2</div> 
  37.     </div> 
  38. </body> 
  39. </html> 

这时效果如图3所示，相应的文件位于网页学习网CSS教程资源中“第4章\11.htm“。

图3 设置为柑对定位前的效果
图3 设置为柑对定位前的效果

在代码中可以看到，现在对两个子块的设置都还空着。下面首先将Box-1盒子的CSS设置为；

  1. #block1{  
  2. position:relative;  
  3. bottom:30px;  
  4. right:30px;  
  5. } 

将子块1的position属性设置成relative，子块2还没有设置任何与定位相关的属性。此时的效果如图3所示，与前面的图3对比，可以看到子块1的位置以自身为基准向上和向左各偏移了30像素。而子块2和前面的图3所示的相比没有任何变化，就好像子块1还在原来的位置上。

图4 两个兄弟div的情况下，其中一个设置为相对定位后的效果
图4 两个兄弟div的情况下，其中一个设置为相对定位后的效果

这又一次验证了前面实验I中总结出的两条结论，并且需要把第2条结论再稍稍改进。因为，使用相对定位的盒子不仅对父块没有任何影响，对兄弟盒子也没有任何影响。至此，可以总结出，对于相对定位的规律是：

● 使用相对定位的盒子，会相对于它原本的位置，通过偏移指定的距离，到达新的位置。lodidance.com

● 使用相对定位的盒子仍在标准流中，它对父亲和兄弟盒子都没有任何影响。

如果同时设置两个子块的position属性都为relative，情况又会如何呢？现在把子块2也进行相应的设置，代码如下。

  1. #block2{  
  2. position:relative;  
  3. top:30px;  
  4. left:30px;  
  5. } 

这时的效果如图5所示，相应的文件位于网页学习网CSS教程资源中“第4章\12.htm“。

图5 两个兄弟div都设置为相对定位后的效果
图5 两个兄弟div都设置为相对定位后的效果

3．结论

这继续验证了上面总结的两条结论，请读者记清楚关于“相对定位”的定位原则：

● 使用相对定位的盒子，会相对于它在原本的位置，通过偏移指定的距离，到达新的位置。

● 使用相对定位的盒子仍在标准流中，它对父块和兄弟盒子没有任何影响。

需要指出的是，上面的实验是针对标准流方式进行的，实际上，对浮动的盒子使用相对定位也是一样的，例如在4.1节中显示的3个浮动的盒子，它们都向左浮动排在一行中，如果对其中的一个盒子使用相对定位，它也同样相对于它在原本的位置，通过偏移指定的距离，到达新的位置，它旁边的Box-3仍然“以为”它还在原来的位置。

 

编辑：网页学习网
本文地址:http://www.lodidance.com/css/jc/675.html


联系
我们