CSS网页布局：关于定位（position）

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

quo;的包含块（也叫初始包含块）由用户代理生成，在HTML中，根元素是HTML元素，尽管有的浏览器会不正确地使用body元素。

对于那些未绝对定位的非根元素来说，元素的包含块设置为最近的块级祖先元素的内容区边沿。

对那些使用绝对（absolute）作为定位（postition）的非根元素，包含块设为最近的定位（postition）不是静止（static）的祖先元素（任何类型）。有以下几种情况：

如果祖先元素是块级（block）元素，包含块设为祖先元素的填充（padding）边沿，也就是被边框（border）约束的区域。
如果祖先元素是内联（inline）元素，包含块设为祖先元素的内容边沿。

关于包含块，最重要的是要记住它为所有后辈元素建立了一个格式编排的上下文。另一个重要方面是，元素可定位于它们的包含块之外。
因此，绝对定位的元素往往以浏览器可视区域的左上为坐标原点来进行定位了。

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

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

其各参数含义是：

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

示例：

div { position: absolute; bottom: 1in; left: 1in; right: 1in; top: 1in; }

div { position:relative; top:-3px; left:6px; }

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

<body>

<div id="box">
CSS网页布局：关于定位（position）

<div id="nav">
CSS网页布局：关于定位（position）

<p>每个显示元素都可以用定位的方法来描述，而其位置由此元素的<strong>包含块</strong>来决定的。</p>
CSS网页布局：关于定位（position）

</div>

</body>

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

分享到：更多

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

上一篇: CSS让图片垂直居中和底端对齐的代码下一篇: CSS教程：div设置float后高度不自动增加

关于CSS网页布局：关于定位（position）的所有评论

随机推荐