网页布局绝对定位轻松简单

来源：互联网责任编辑：栏目编辑发表时间:2013-07-01 22:31　点击:次

ASP PHP JSP JavaScript 网页设计 DIVCSS Ajax技术 HTML5

使用CSS来定位页面内层的位置，一直是比较难以掌握的事情，很多时候，往往被绝对定位的元素，总是以浏览器的左上角为坐标原点，此时，如果浏览器的大小改变，被定义的层就会偏离设计想要的位置，让人很挠头。

其实，要想控制好层的绝对定位，只要理解CSS中关于定位（position）的定义，一切就会变得轻松简单。

CSS中关于定位（position）是这样定义的：

定位（position）允许用户精确定义元素框出现的相对位置，可以相对于它通常出现的位置，相对于其上级元素，相对于另一个元素，或者相对于浏览器视窗本身。每个显示元素都可以用定位的方法来描述，而其位置由此元素的包含块来决定的。

包含块（containing block）是格式编排发生的关联场景，例如，一个加粗的元素的包含块可以是该元素所出现的段落，如图1所示。

在理解定位之前，首先，要先理解HTML文件的结构，例如有一个html文件内容如下：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>文档结构</title>
</head>
<body>
<h1>CSS规则</h1>
<p>样式表由一些<strong>样式规则</strong>组成。</p>
<ul>
  <li>选择符
    <ul>
      <li>类选择符</li>
      <li>ID选择符</li>
      <li><em>包含</em>选择符</li>
    </ul>
  </li>
  <li>属性</li>
  <li>值</li>
</ul>
</ul>
</body>
</html>

此文档对应的树型结构，如图2所示。