CSS之position属性全解

【概念】

static:默认取值，位置跟书写的顺序一样。
relative:相对位置，参照物是自己本身,当相对运动时,只影响自己的显示位置,且依然占据原先的位置，后边的标签流不会受到影响。
absolute:绝对定位，参照物是离本元素最近的一个(有relative或absolute属性)定位的“祖先”，如果没有这个父容器，那默认就是body。
fixed:真正的绝对定位，其位置永远相对浏览器位置来计算。而且就算用户滚动页面，元素位置也能相对浏览器保持不变，也就是说永远可以看到，这个做一些彩单的时候可以用。可惜的是ie还不支持

【relative VS absolute】

relative 参照物是自己依然影响原先标签流依然占位

absolute 参照物是已定位的父标签不影响影响标签流相对父标签的新层

【relative absolute 嵌套】

由于relative有两种概念的位置，一个是原先标签流的位置，一个是当前显示的位置,如果在relative的里面再嵌套一个absolute 的块标签，那这个标签是相对与那个位置移动呢？答案是相对当前显示的位置来偏移,看下面的例子:

<HTML>
<HEAD></HEAD>
<BODY>
<style type="text/css">
div{float:left;}
.box
{
 position:relative;
 width:300px;
 height:300px;
 background-color:green; 
}
.boxa
{
 position:relative;
 width:100px;
 height:100px;
 background-color:yellow; 
 top:100px;
 left:200px;
}
.boxb
{
 position:relative;
 width:100px;
 height:100px;
 background-color:gray; 
  
}

.boxaa
{
 position:absolute;
 width:50px;
 height:50px;
 background-color:blue; 
 color:yellow;
 top:50px;
 left:50px;
}

</style>
<div class="box">
<div>
<div class="boxa">A<div class="boxaa">a</div></div>
<div class="boxb">B</div>
</div>
</div>

</BODY>
</HTML>

显示结果：

posted on 2012-11-09 18:02 极简阅读(300) 评论(0) 收藏举报