网页布局绝对定位轻松简单(2)
来源：互联网 责任编辑：栏目编辑 发表时间:2013-07-01 22:31 点击:次
那为什么定位了的元素还总是以浏览器窗口的左上角为坐标呢？因为并不是每个元素都能为其后辈元素生成一个包含块。
建立包含块的规则如下：
- 根元素”的包含块（也叫初始包含块）由用户代理生成，在HTML中，根元素是HTML元素，尽管有的浏览器会不正确地使用body元素。
- 对于那些未绝对定位的非根元素来说，元素的包含块设置为最近的块级祖先元素的内容区边沿。
- 对那些使用绝对（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&g
相关新闻>>
最新推荐更多>>>
- 发表评论
-
- 最新评论 更多>>
