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

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

置为最近的块级祖先元素的内容区边沿。

对那些使用绝对（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>每个显示元素都可以用定位的方法来描述，而其位置由此元素的<strong>包含块</strong>来决定的。</p>
  </div>
</div>
</body>

此时，如果你要对nav绝对定位，则需设置css：

body {
margin:0;
padding:0;
text-align:center;
}
#box{
background:#ff0;
position:relative; /* 使box层成为其子孙元素的包含块 */
width:500px;
height:200px;
margin:0 auto;
}
#nav {
background:#ccc;
position:absolute; /* nav层将在box层的边框范围内绝对定位 */
top:20px;
left:40px;
width:200px;
}

其显示效果如图3所示。

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

因此，掌握了包含块的概

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

分享到：更多

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

上一篇: 网页字体该如何设置？下一篇: 两个CSS代码精简工具(网页教学网推荐)

关于网页布局绝对定位(position)轻松简单的所有评论

随机推荐