CSS网页布局：关于定位（position）
作者 佚名技术
来源 CSS技术
浏览
发布时间 2012-03-04
|
使用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所示。  CSS大部分能力是基于元素的“父子”关系，在图2的家族树中，每个元素都是另一个元素的“父”或者“子”或者两者都是。例如：body既是html的子元素，又是h1的父元素，而html就是h1的祖先，h1则是html的子孙。 Body是所有浏览器能显示的元素的祖先，而html是所有元素的祖先，也称为“根元素”。 那为什么定位了的元素还总是以浏览器窗口的左上角为坐标呢？ 因为并不是每个元素都能为其后辈元素生成一个包含块。 建立包含块的规则如下：
|
凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢! |
你可能对下面的文章感兴趣
关于CSS网页布局：关于定位（position）的所有评论
