CSS教程:CSS中的定位（position）

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

每个元素都能为其后辈元素生成一个包含块。
　　建立包含块的规则如下：
　　1. 根元素”的包含块（也叫初始包含块）由用户代理生成，在HTML中，根元素是HTML元素，尽管有的浏览器会不正确地使用body元素。
　　2. 对于那些未绝对定位的非根元素来说，元素的包含块设置为最近的块级祖先元素的内容区边沿。
　　3. 对那些使用绝对（absolute）作为定位（postition）的非根元素，包含块设为最近的定位（postition）不是静止（static）的祖先元素（任何类型）。有以下几种情况：
　　a.如果祖先元素是块级（block）元素，包含块设为祖先元素的填充（padding）边沿，也就是被边框（border）约束的区域
　　b.如果祖先元素是内联（inline）元素，包含块设为祖先元素的内容边沿。
因此，绝对定位的元素往往以浏览器可视区域的左上为坐标原点来进行定位了。

　　在CSS中可是使用position属性来在不同的定位类型中选择。

　　语法：
　　position : static | absolute | fixed | relative | inherit

　　其各参数含义是：
　　static : 静态（默认），无特殊定位。
　　relative : 相对，对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置
　　absolute : 绝对，将对象从文档流中拖出，通过width、height、left，right，top，bottom等属性与margin、padding、border进行绝对定位，绝对定位的元素可以有边界，但这些边界不压缩。而其层叠通过z-index属性定义。
　　fixed : 悬浮，使元素固定在屏幕的某个位置，其包含块是可视区域本身，因此它不随滚动条的滚动而滚动。（IE5.5+不支持此属性。）
　　inherit : 这个值从其上级元素继承得到。

　　示例：
div {
position: absolute;
bottom: 1in;
left: 1in;
right: 1in;
top: 1in;
}
div {
position:relative;
top:-3px;
left:6px;
}

　　既然了解了包含块的概念，那么对于相对定位和绝对定位的关系，就很好掌握了。
　　例如，现在需要把页面内容整体居中，然后再将其中某些层绝对定位的话，那就要把最外面的层设置定位属性。

<body>
<div id="box">
<div id="nav">
<p>每个显示元素

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

分享到：更多

你可能对下面的文章感兴趣

上一篇: WEB标准学习,认识两种网页声明的含义下一篇: CSS模块化设计——从空格谈起

关于CSS教程:CSS中的定位（position）的所有评论

随机推荐