一般基本了解的层和框模型后，接下来便可以进一步讨论怎样做出效果页面。页面的分布和内容所处的位置，将会给浏览者传递重要的网站讯息。  

SEO网站页面定位方法 　　

相对位置 　　

美刻知识点讲解:光盘/视频讲解/第11章/相对位置.wmv 　　

如果将position属性改成relative,其作用表示相对定位，那么它所相对的参照物，就是static属性下的位置，也就是默认情况下的位置。当设定不同的数值时，相对于初始位置发生改变，而初始位置会留下空白占位。这里，可以通过top.right、bottom和left属性来控制位移。 　　

那么，这两句代码所约束的对象，相对于初始位置向右偏离20px的位置，所以把position属性改成relative。 　　

绝对定位 　

绝对定位的属性是absolute,也许它是使用得最多的属性之一。较之于相对定位的relative，它的改变在于当对象发生位移时，原先的初始位置如同被挖去了一样。这个对象独立于其他的页面内容，而初始位置的空白会被其他内容自然填补。 　　

此外，绝对定位的对象并不是相对于初始位置发生位移。事实上，它是相对于上一级的对象的初始位置发生位移。如果上一级的对象是浏览器窗口，那么它就是相对于整个页面来发生位移。同样，绝对定位也可以使用top、right、bottom和left属性来控制位移。 　　

由于上一级的对象即是页面本身，所以，它所发生的位移是相对于浏览器窗[1向右偏移20px,向下偏移20PX.而区域1和区域3结合在了一起，就好像从来都没有过区域2一样。那么，什么是相对于上一级的对象发生位移呢？在样式表的定义中，添加一个新的定义，插入的代码是: 　　span{position:relative; 　　background-color:black; 　

那么，这个行内标签就是上一级的框模型，而接着将代码第25行写为: 　　<span>XXXXX 　　<divid=”block2”>区域2 　　</div> 　　</span> 　

固定定位 　　

固定定位比较类似于绝对定位，当页面长度超出浏览器窗[]时，此时会出现滚动条。区别就在于绝对定位下的页面对象的框，会随着滚动条和页面一起移动，而固定定位下的页面对象的框则不会随之滚动。同样，固定定位也可以使用top.right、bottom和left属性来控制位移。 　

注意:IE7之前版本的IE浏览器不支持固定定位的框。 　　

固定定位和绝对定位的性质是一样的，它们所定义的框的位置是独立于其他页面内容之外的。这样，有时候它们难免会叠加在一起，这种情况可以使用Z轴属性，即层的叠加特性来改变它们的顺序。