CSS的定位：position

为什么要使用定位：

          使盒子可以在屏幕任何位置上动

定位分类：

                       定位主要包括定位模式和边偏移两部分，边偏移是告诉盒子该往哪边走（上下左右），定位模式是告诉盒子采用什                         么样的定位方式，相对 绝对 静态 固定等。

定位模式：

• 静态定位的唯一用处是用来取消定位；
• 相对定位是以自己的左上角为基准来移动，移动的大小就是自己设置的边偏移,但是原来的所占的位置是继续占有的，也就是如果有其他的盒子，其他的盒子的位置是不会变的，还是按照该移动的盒子之前存在的时候来布局放置的。
• 绝对定位是不占位置的,该盒子设置了绝对定位,则原来存在的位置不存在了,所以下面的盒子就跑到上面去了，设置绝对定位的盒子的边偏移的移动是以浏览器的当前屏幕为基准对齐的，绝对定位中：父亲没有定位,儿子有定位,则儿子的定位会以当前的屏幕为基准来定位，可能会跑出父亲的范围,按照定位的方式走；父亲有定位,儿子有定位,则儿子的定位会以父亲的左上角为基准来定位，按照定位的方式走； 总结起来：绝对定位中，定位的儿子元素依据已经定位的（绝对，固定和相对定位）的父元素（祖先）进行定位。

自绝父相：复杂的项目中经常用来定位元素

例如做一个冰淇淋广告的部分，将三张图拍案组合成一张图片，代码如下：

<style type="text/css">
			div{
				width: 310px;
				height: 190px;
				border: 1px solid #ccc;
				margin: 100px auto;
				padding: 10px;
				position: relative;
			}
			.top{
				position: absolute;
				top: 0;
				left: 0;
			}
			.bottom{
				position: absolute;
				right: 0;
				bottom: 0;
			}
</style>

<div>
   <!--前两张图片分别是图中的左上角和右下角的小图-->
   <img src="img/top_tu.gif" class="top"/> 
   <img src="img/br.gif" class="bottom"/>
   <img src="img/adv.jpg" alt="" class="main"/>
</div>

效果如下图：