CSS定位与浮动详解

易辉艳

在网页布局中，div等块级元素用于搭建网站结构，CSS层叠样式表（Cascading Style Sheets）则用于对块级元素进行像素级的精确定位及美化。CSS定位一直是WEB标准应用中的难点，只有理清了定位的原理，才会让网页更加完美。

一、CSS定位

在CSS布局中，元素定位用Position属性完成。Position属性有4个值，分别是：static、relative、absolute、fixed，其中static是默认值，代表无定位（用于取消特殊定位的继承，恢复默认）。

1.相对定位

当元素的Position属性值为relative时，这个元素即被相对定位了。相对定位后，该元素将出现在相应的位置上，我们可以通过设置垂直（top值）或水平（left值）位置，使这个元素“相对于”它原来的位置进行移动。对元素使用相对定位时，无论是否进行移动，该元素仍然保留其原来的空间，移动元素会覆盖其他框，因此，在实际应用中如果相对定位的位移数值过大，那么原有的区域就会形成一块空白。

2.绝对定位

当元素的Position属性值为absolute时，这个元素即被绝对定位了。绝对定位在几种定位中应用最广泛，它能很精确地将元素移动到想要的位置。使用绝对定位的元素会浮于其他元素之上，它是独立出来的。绝对定位的元素的位置相对于最近的已定位的祖先元素，如果没有已定位的祖先元素，那么它的位置相对于最初的包含块（浏览器或其他HTML元素）。在默认情况下，绝对定位的框紧挨着其祖先元素的左边和顶边。在CSS中设置绝对定位元素的top（顶部）、bottom（底部）、left（左边）和right（右边）的值，可以使绝对定位的框从它的包含块向上、下、左、右移动，这样可以直接将元素定位在页面上的任何位置。绝对定位使元素的位置与文档流无关，因此不占据空间，对比相对定位，绝对定位的元素不会在原有区域形成空白。绝对定位的框会覆盖页面上的其他元素形成堆放，我们通过设置z-index属性来控制这些框的堆放次序。z-index值越大，框在堆中的位置就越高。

重要的是，为更方便地进行网页布局，我们希望绝对定位的坐标原点可以固定在网页中的某一个随网页移动的点，当网页是居中形式的时候这种效果就会显得特别的重要。实现这种效果的基本方法就是对绝对定位元素的祖先元素使用相对定位，那么绝对定位元素的坐标就会以相对定位的祖先元素为坐标起始点，而祖先元素如果要产生位置移动，或是浏览器窗口大小有所变动都不会影响到这个绝对定位元素与相对定位的祖先元素之间的位置关系。需要注意的是，为避免绝对定位引起的重叠，应固定绝对定位元素的尺寸。

3.固定定位

当元素的Position属性值为fixed时，这个元素即被绝对定位了。固定定位和绝对定位很相似，不过固定定位的元素不是随滚动条的拖动变化位置，而是固定在浏览器的视框位置。不幸的是，IE 6和更低版本不支持固定定位。

二、CSS浮动

浮动是一种定位方式，它是CSS网页布局中非常重要的属性。对块状元素应用浮动（float）属性来进行布局，不但可以对整个页面版式进行规划，也可以对一些基本元素如导航等进行排列。

使用div布局网页，通常结果是一个框占据一行。怎样才能实现布局中多个并列的区域呢？通过浮动（float）属性，可以使多个块状区域并列一行。Float有4个属性值：Left和Right分别浮动元素到各自的方向，None（默认值）使元素不浮动，Inherit将会从祖先元素获取float值。对前面的块状元素设置浮动属性（Left或Right）使之成为浮动元素后，有足够的空间（即包含块够大时）时，后面的块状元素会自动浮上来，和它并列一行。例如，将三个块状元素都设置为向左浮动，在有足够空间的情况下，它们并列成一行。通过浮动属性设置,可以将多个块状的li列表元素并列，这种布局结构被广泛应用于网页的导航条制作。

在使用浮动属性布局时，如果包含块无法容纳水平排列的多个浮动元素，那么其他浮动块就会向下移动，直到有足够空间的地方。如果浮动元素的高度不同，那么当它们向下移动时可能会被其他浮动元素“卡住”。

清除（clear）是浮动（float）的相关属性。Clear属性的值为none、left、right和both，默认值为none。当多个块状元素由于第1个元素设置了浮动属性并列时，如果某个元素不需要被“流”上去，即可设置相应的clear属性。

参考文献：

［1］陈益材等.Dreamweaver cs4+asp动态网站建设从入门到精通［M］.北京：机械工业出版社，2011：67-72.

［2］Andy Budd等.精通CSS：高级Web标准解决方案［M］.陈剑瓯译.北京：人民邮电出版社，2010：43-50.