快速业务通道

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

作者 佚名技术 来源 CSS技术 浏览 发布时间 2012-03-03

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

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

CSS中关于定位(position)是这样定义的:

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

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

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

在理解定位之前,首先,要先理解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所示。

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

CSS大部分能力是基于元素的“父子”关系,在图2的家族树中,每个元素都是另一个元素的“父”或者“子”或者2者都是。例如:body既是html的子元素,又是h1的父元素,而html就是h1的祖先,h1则是html的子孙。

Body是所有浏览器能显示的元素的祖先,而html是所有元素的祖先,也称为“根元素”。

那为什么定位了的元素还总是以浏览器窗口的左上角为坐标呢?因为并不是每个元素都能为其后辈元素生成一个包含块。

建立包含块的规则如下:

  1. 根元素”的包含块(也叫初始包含块)由用户代理生成,在HTML中,根元素是HTML元素,尽管有的浏览器会不正确地使用body元素。
  2. 对于那些未绝对定位的非根元素来说,元素的包含块设

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务,公司网站:http://www.lingzhong.cn 为了给广大客户了解更多的技术信息,本技术文章收集来源于网络,凌众科技尊重文章作者的版权,如果有涉及你的版权有必要删除你的文章,请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!

分享到: 更多

Copyright ©1999-2011 厦门凌众科技有限公司 厦门优通互联科技开发有限公司 All rights reserved

地址(ADD):厦门软件园二期望海路63号701E(东南融通旁) 邮编(ZIP):361008

电话:0592-5908028 传真:0592-5908039 咨询信箱:web@lingzhong.cn 咨询OICQ:173723134

《中华人民共和国增值电信业务经营许可证》闽B2-20100024  ICP备案:闽ICP备05037997号