CSS之绝对定位深入研究

　　一、下看个两个例子

　　1.xhtml代码

body
　div　class="relative"
　　　　span　class="absolute"Test　absolute/span
　/div　
/body

　　2.css代码

.relative　{　position:relative;height:120px;　border:2px　solid　black;　}
.absolute　{　position:absolute;　top:10px;　left:10px;
　　　　　　　　　　　　　　　padding:5px;　text-align:center;　
　　　　　　　　　　　　　　　border:5px　solid　black;　background-color:gold;　}

　　3.运行的结果

　　4.改进css

　　去掉span父元素的定位。css代码如下，

.relative　{　height:120px;　border:2px　solid　black;　}
.absolute　{　position:absolute;　top:10px;　left:10px;
　　　　　　　　　　　　　　　padding:5px;　text-align:center;　
　　　　　　　　　　　　　　　border:5px　solid　black;　background-color:gold;　}

　　5.修改后运行结果

　　二、对结果的分析

　　绝对定位的元素的位置相对于最近的已定位的祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块，根据用户定义的不同，最初的包含快可能是body或者html元素；绝对定位的元素会从文档流中分离，不再占据空间； position:absolute完成绝对定位需要top和left属性的共同作用。

　　所以，当我们想使用绝对定位的核心思想是，让一个元素脱离正常文档流的排列，让它相对于另一个元素重新排列。