HNWE T1 相对定位、绝对定位差别

 

层的应用及其定位（绝对定位和相对定位）

　　大家都知道，为了让网页能够自动地适应用户设置的分辨率，在网页制作过程中人们采用了百分比的设置方式，从而页面的所有元素从新排版，保证原来的格式。但如果你在页面上使用了层，你会发现当浏览器大小改变时，层的位置却没有改变，结果它和其他的元素之间的配合出现了错位现象，页面变得杂乱无章了。而我们是不能够强制用户使用特定的分辨率的，那么就只有想办法让层的位置也能够象表格一样根据浏览器大小的改变而重新定位，这就需要合理地使用相对定位和绝对定位了。

　　绝对定位（position:absolute）：即层默认的定位方式，绝对于浏览器左上角的边缘开始计算定位数值。

　　相对定位（position:relative）：层的位置相对于某个元素设置，该元素位置改变，则层的位置相应改变。

　　对比两种定位方式，不难发现，使用相对定位的层才是真正实现设计者思想的方式，从而完全掌握层的排版。

那么，绝对定位有没有用呢？当然有用了，当你的网页全部使用层来排版，而且页面是使用默认的居左放置的，那么使用默认的绝对定位方式可以方便的排版，提高设计的工作效率。

实例演示div+css的绝对定位和相对定位布局

概要：

本文主要描述XHTML中相对定位和绝对定位各自的本质、用法、区别和两者之间的关系。以及使用CSS的Left、Right、Top、Bottom属性（偏移属性）和Margin属性（外边距）对定位块级元素进行布局的方法。

说明：

占位空间：元素在文档流中所占据的空间。

物理空间：元素本身所占据的空间。

下面分3种情况分别对相对定位和绝对定位进行讨论：

1.只使用css第一组属性布局定位元素的情况
2.只使用css第二组属性布局定位元素的情况
3.混合使用第一组和第二组属性的情况

图1为未定位时的初始效果，层级关系为：
<div
  <div box1
  <div box2
  <div box3
效果图：

图1

一、用相对定位布局块级元素

元素设置position值： position:relative

此属性值的设置，元素没有脱离文档流，还是普通流定位模型的一部分，会对文档流中其它元素布局产生影响。（说明：蓝色代表占位空间，红色代表元素）

1.仅使用left、right、top和bottom属性布局相对定位元素的情况

元素原本所占的占位空间仍保留，物理空间偏移。图2中，设置元素的left和top的值，对box2进行布局，可以发现除了box2偏移之外，其他块级元素的位置没有被影响，可见box2的占位空间还是存在的。层级关系为：
<div
  <div box1
  <div box2 ——– position:relative ;top:-60px; left:80px;
  <div box3
效果图：

图2

2.仅使用margin属性布局相对定位元素的情况

用margin-bottom属性和margin-top属性设置负值可以改变文档流中所占空间的高度，会影响文档流中的其它元素位置。例如：margin-top:负值; margin-bottom:负值

图3中，box1和box2都设置了元素margin-bottom的值，值等于它们高度的负值。box1和box2物理空间没有改变，占位空间高度为0。box3的margin-bottom值设置为0，物理空间没有改变，占位空间高度不变。再通过margin-left对box2和box3设置左偏移值。层级关系为：
<div
  <div box1 ——– position:relative ;margin-bottom:-102px;
  <div box2 ——– position:relative ;margin-bottom:-102px; margin-left:110px;
  <div box3 ——– position:relative ;margin-bottom:0px; margin-left:220px;
效果图：

图3

3.混合使用left、right、top和bottom属性与margin属性布局相对定位元素的情况

此情况，它们的值会产生累加的效果。在CSS2.1中所有的浏览器都使用外边距边界来完成偏移计算。本文从数学的角度理解为偏移属性值和外边距属性值累加。图4中，box2是在图3的基础上增加设置left的值产生的效果，可见margin-left的值和left的值产生了累加(偏移量:80px = 110px - 30px)。层级关系为：
<div
  <div box1 ——- position:relative ;margin-bottom:-102px;
  <div box2 ——- position:relative ;margin-bottom:-102px;margin-left:110px; left:-30px;
  <div box3 ——- position:relative ;margin-bottom:0px; margin-left:220px;
效果图：

图4

二、用绝对定位布局块级元素

设置position值：position:absolute;此属性值的设置，元素从文档流完全删除。

1.仅使用left、right、top和bottom属性布局绝对定位元素的情况

绝对定位的元素的偏移位置以最近的定位(包括相对定位和绝对定位)祖先元素作参照物。如果元素没有已定位(包括相对定位和绝对定位)的祖先元素，那么它的参照物为最顶级元素（由于浏览器的默认参照物不同，物可能是BODY或 HTML 元素）。注意：IE下参照物需设置宽度或高度bottom和right属性才可以正确的定位。设置元素为绝对定位元素后，元素的Left、 Right、Top和Bottom属性默认值不是0，只是将元素脱离文档流。

以下例子说明这个问题。在图5中，将橘黄色的祖先元素设置为定位元素（即参照物），box2设为绝对定位，文档流由box1-box2-box3变为box1-box3，可box2却没有移动到距离参照物0值的位置上，可见box2的Left、 Right、Top和Bottom属性默认值不等于0，它只是脱离了文档流而已。层级关系为：
<div ———————————position:relative 参照物
  <div—————————-没有设置为定位元素，不是参照物
    <div———————-没有设置为定位元素，不是参照物
      <div box1
      <div box2 ——–absolute
      <div box3
效果图：

图5

以最近的祖先定位元素为参照物的情况

图6中，Box2设置成绝对定位元素，脱离了文档流，文档流由box1-box2-box3变为box1-box3，box2以最近的定位祖先（蓝色框）为参照物。层级关系为：
<div ——————————— position:relative; 不是最近的祖先定位元素，不是参照物
  <div—————————-没有设置为定位元素，不是参照物
    <div———————-position:relative 参照物
      <div box1
      <div box2 ——–position:absolute;top:50px; left:120px;
      <div box3
效果图：

图6

图7中，为改变参照物（橘色框）后的效果。层级关系为：
<div ——————————— position:relative;最近的祖先定位元素，参照物
  <div—————————-没有设置为定位元素，不是参照物
    <div———————-没有设置为定位元素，不是参照物
      <div box1
      <div box2 ——–position:absolute;top:50px; left:120px;
      <div box3
效果图：

图7

图8中，参照物为最顶级的元素情况。层级关系为：
<div ———————————没有设置为定位元素，不是参照物
  <div—————————-没有设置为定位元素，不是参照物
    <div———————-没有设置为定位元素，不是参照物
      <div box1
      <div box2 ——–position:absolute;top:50px; left:120px;
      <div box3
效果图：

图8

2. 仅使用margin属性布局绝对定位元素的情况

此情况，margin-bottom 和margin-right的值不再对文档流中的元素产生影响，因为该元素已经脱离了文档流。另外，不管它的祖先元素有没有定位，都是以文档流中原来所在的位置上偏移参照物。

图9中，使用margin属性布局相对定位元素。层级关系为：
<div ——————————— position:relative; 不是参照物
  <div—————————-没有设置为定位元素，不是参照物
    <div———————-没有设置为定位元素，不是参照物
      <div box1
      <div box2 ——–position:absolute;margin-top:50px; margin-left:120px;
      <div box3
效果图：

图9

IE6的情况下，box2前面没有兄弟节点，则margin-left的值会出现双倍边距，见图10。层级关系为：
<div ——————————— position:relative; 不是参照物
  <div—————————-没有设置为定位元素，不是参照物
    <div———————-没有设置为定位元素，不是参照物
      <div box1
      <div box2 ——–position:absolute;margin-top:50px; margin-left:60px;
      <div box3
效果图：

图10

3. 混合使用left、right、top和bottom属性与margin属性布局相对定位元素的情况

a.margin属性和top、bottom、left、right属性同时使用，如果同一方向偏移，它们的值会产生累加的效果，见图11。
例如：margin-left:120px; left:-20px; 那么box2的偏移值为120px-20px=100px;层级关系为：
<div ———————————-不是参照物
  <div—————————–不是参照物
    <div———————–position:relative;参照物
      <div box1
      <div box2 ———position:absolute;margin-left:120px; left:-20px; top:50px;
      <div box3
效果图：

图11

b. 绝对定位和相对定位的累加加效果不同，如果top、bottom、left、right属性和margin属性偏移的方向相反，top、bottom、left、right属性值有效，反方向的margin属性值无效，见图12。层级关系为：
<div ———————————-不是参照物
  <div—————————–不是参照物
    <div———————–position:relative;参照物
      <div box1
      <div box2 ———position:absolute;margin-left:120px; right:10px; top:50px;
      <div box3
效果图：

图12

总结：

l        相对定位的元素不会脱离文档流，占用文档流的空间，Left;Right; Top和Bottom属性与margin属性混合使用会产生累加效果。

l        绝对定位的元素脱离文档流，偏移不影响文档流中的其它元素，Left;Right; Top和Bottom属性与margin属性混合使用，偏移方向相同值累加，方向相反，margin属性值无效。

l        绝对定位的元素以最近的定位祖先元素为参照物。

详细分析css定位与定位应用

1、定位的定义：

　　在CSS中关于定位的内容是：position:relative |absolute | static | fixed

　　static 没有特别的设定，遵循基本的定位规定，不能通过z-index进行层次分级。
　　relative 不脱离文档流，参考自身静态位置通过 top,bottom,left,right 定位，并且可以通过z-index进行层次分级。
　　absolute 脱离文档流，通过 top,bottom,left,right 定位。选取其最近的父级定位元素，当父级 position 为 static 时，absolute元素将以body坐标原点进行定位，可以通过z-index进行层次分级。
　　fixed 固定定位，这里他所固定的对像是可视窗口而并非是body或是父级元素。可通过z-index进行层次分级。

　　CSS中定位的层叠分级：z-index: auto | number;

　　auto 遵从其父对象的定位
　　number 无单位的整数值。可为负数

2、定位的原理：

2.1 可以位移的元素 （相对定位）

　　在文本流中，任何一个元素都被文本流所限制了自身的位置，但是通过CSS我们依然使得这些元素可以改变自己的位置，我们可以通过float来让元素浮动，我们也可以通过margin来让元素产生位置移动。但是事实上那并非是真实的位移，因为，那只是通过加大margin值来实现的障眼法。而真正意义上的位移是通过top,right,bottom,left（下称TRBL，TRBL可以折分使用。）针对一个相对定位的元素所产生的。我们看下面的图：

相对定位

　　我们看图中是一个宽度为200px，高度为50px，margin:25px; border:25px solid#333; padding:25px; 相对定位的元素，并且位移距上50px，距左50px。而下方是一块默认定位的黑色区块。我们看到这个处在文本流的区块被上面的相对定位挡住了一部分，这说明：“当元素被设置相对定位或是绝对定位后，将自动产生层叠，他们的层叠级别自然的高于文本流”，除非设置其z-index值为负值，但是在 Firefox等浏览器中z-index为负值时将不会显示。并且我们发现当相对定位元素进行位移后，表现内容已经脱离了文本流，只是在本文流中还为原来的相对对定位留下了原有的总宽与总高（内容的高度或是宽度加上margin/border/padding的数值）。这说明在相对定位中，虽然表现区脱离了原来的文本流，但是在文本流中还有此相对定位的老窩。这点要特别注意，因为在实际应用中如果相对定位的位移数值过大，那么原有的区域就会形成一块空白。

　　并且我们注意，定位元素的坐标点是在margin值的左上边缘点，即图中的B点。那么所有的位移的计算将以这个点为基础进行元素的推动。当TRBL为正值时位移的方向是内聚的。由此可推，当TRBL为负值时位移的方向是外放的。在图片中有位移的箭头指向标识，带有加号的是正值位移方向，带有减号的是负值位移方向。

2.2 可以在任意一个位置的元素 （绝对定位）

　　如上所述：相对定位只可以在文本流中进行位置的上下左右的移动，同样存在一定的局限性，虽然他的表现区脱离了文本流，但是在文本流却依然为其保留了一席之地，这就好比一个打工的人他到了外地，但是在老家依然有一个专属于他的位置，这个位置不随他的移动而改变。但是这样很明显就会空出一块空白来，如果希望文本流抛弃这个部分就需要用到绝对定位。绝对定位不光脱离了文本流，而且在文本流中也不会给这个绝对定位元素留下专属空位。这就好比是一个工厂里的职位，如果有一个工人走了自然会要有别的工人来填充这个位置。而移动出去的部分自然也就成为了自由体。绝对定位将可以通过TRBL来设置元素，使之处在任何一个位置。在父层position属性为默认值时，TRBL的坐标原点以body的坐标原点为起始。看下图：

绝对定位

　　上图可知，文本流中的内容会顶替绝对定位无素的位置，一点都不会客气。而绝对定位元素自然的层叠于文本流之上。而在单一的绝对定位中，定位元素将会跑到网页的左上角，因为那里是他们的被绝对定位后的坐标原点。

2.3 被关联的绝对定位

　　上面说的是单一的绝对定位，而在实际的应用中我们常常会需要用到一种特别的形式。即希望定位元素要有绝对定位的特性，但是又希望绝对定位的坐标原点可以固定在网页中的某一个点，当这个点被移动时绝对位定元素能保证相对于这个原坐标的相对位置。也就是说需要这个绝对定位要跟着网页移动，而并且是因定在网页的某一个固定位置。通常当网页是居中形式的时候这种效果就会显得特别的重要。要实现这种效果基本方式就是为这个绝对定位的父级设置为相对定位或是绝对定位。那么绝对定位的坐标就会以父级为坐标起始点。

　　虽然是如此，但是这个坐标原点却并不是父级的坐标原点，这是一个很奇怪的坐标位置。我们看一下模型图示：

关联定位

　　我们看到，这个图中父级为黑灰色区块，子级为青色区块。父级是相对定位，子级是绝对定位。子级设置了顶部位移50个像素，左倾位移50个像素。那么我们看，子级的坐标原点并不是从父级的坐标原点位移50个像素，而是从父级块的padding左上边缘点为坐标起始点（即A点）。而父级这里如果要产生位置移动，或是浏览器窗口大小有所变动都不会影响到这个绝对定位元素与父级的相对定位元素之间的位置关系。这个子级也不用调整数值。

　　这是一种很特别并且也是非常实用的应用方式。如果你之前对于定位的控制并不自如的话，相信看完对这里对定位的解释一定可以把定位使用得随心所欲。

2.4 总在视线里的元素 （固定定位）

　　由于广告的滥用，使得一些浏览器软件都开始有了广告内容拦截，使得一些很好的效果现在都不推荐使用了。比如让一个元素可能随着网页的滚动而不断改变自己的位置。而现在我可以通过CSS中的一个定位属性来实现这样的一个效果，这个元素属性就是曾经不被支持的position:fixed;他的含义就是：固定定位。这个固定与绝对定位很像，唯一不同的是绝对定位是被固定在网页中的某一个位置，而固定定位则是固定在浏览器的视框位置。

　　虽然原来的浏览器并不支持过个属性，但是浏览器的发展使得现在的高级浏览器都可以正确的解析这个CSS属性。并且通过CSSHACK来让IE6都可以实现这样的效果（目前无法使IE5.x）实现这种效果。