CSS之----------相对定位，绝对定位

 

　1　      绝对定位：position: absolute
　　　　H4 { position: absolute; left: 100px; top: 43px }
　　这项CSS规则让浏览器将<H4>的起始位置精确地定在距离浏览器左边100象素，距离其顶部43象素的位置。注意这里唯一设置了的是左边和顶部，也就说，文字将从左到右，从上到下载入浏览窗口。
　　左边和顶部属性很直观，左边（left）设定要素距浏览器窗口左边的距离，顶部（top）设定距离浏览器窗口顶部的距离。设定这些距离时，你可以使用所学过的各种度单位或比例值。使用比例值时，比例值的是相对于母体要素的尺寸。
　　你可以定位什么呢？任何东西！段落、单词、GIF和JPEG图象、QUICKTIME电影等等。

 

　2　      相对定位：position: relative
　　绝对定位使你能精确地定位要素在页面的独立位置，而不考虑页面其它要素的定位设置。相对定位指将你所定位的要素定位到相对于它原来应该出现的位置。例：
　　I { position: relative; left: 40px; top: 10px }
　　相对定位的关键在于定位了的要素的位置是相对于它通常应在的位置进行定位。相对定位单元出现在普通的静态定位单元的行间，定位时没有把自己和静态定位单元完全分开。如果你停止使用相对定位，则文字的显示位置将恢复正常。使用相对定位时要小心，否则容易将页面弄得非常乱。
　

例如：　

<div style="color:#ffffff;background:#000000;height:100px;width:100px"><!--如果不设置宽度，则默认充满浏览器-->
<div style="position:absolute;left:10px;top:10px">一个div区域<!--如果使用绝对定位absolute则 会精确定位到浏览器的某一位置，而使用相对定位relative则定位到相对他应该出现的位置加定位元素指定的值的地方-->
</div>
</div>

绝对定位跟相对定位的区别
　　1、绝对定位跟相对定位最大的区别是相对定位会在父层容器中产生一个虚拟的div占位区。
　　2、可以通过设置父容器的定位属性来改变绝对定位元素的参照容器，但是不可通过该方法改变相对元素的参照容器。
　　3、可以不设置绝对定位元素的高、宽仅依照top等属性控制绝对定位元素的大小，但是该方法对相对定位无效。相对定位的元素，高度、宽度都是固定的，不可修改。
　　4、绝对定位元素会按margin值来扩充（ 负值：向外扩）或收缩自（ 正值：向内收）身，而相对定位收缩的是虚拟出的div占位区， 有时利用这个占位符来讲一个元素扩展到另一个元素的范围内，从而达到自适应的解决。
     5.要时刻记住：绝对定位对于存在嵌套的元素来说，子元素的绝对定位的位置参数是对他的父元素来说的，最下层的元素的位置参数是对于浏览器的边框来说的；相对定位的“相对”是说它相对原来它自己的应该出现的位置来说安装位置参数进行移动