【图】CSS实例教程:用position来布局页面

我们先把上节课最后总结一句话拿出来
如果用position来布局页面，父级元素的position属性必须为relative，而定位于父级内部某个位置的元素，最好用absolute，因为它不受父级元素的padding的属性影响，当然你也可以用position，不过到时候计算的时候不要忘记padding的值。
如果你还是不能太明白这句话，我们就做个实例，把我们第5节页面的头部blog区域用定位(position)来布局一下

（本文来源于图老师网站，更多请访问http://m.tulaoshi.com/webkaifa/）HTML代码和原来的没有区别：

div id="Logo"
a href="#" id="LogoLink"/a
/div

CSS代码就有变化了，咱先看看原来的CSS代码

#Logo{
height:80px;
}
#LogoLink{
display:block;
width:173px;
height:46px;
background:url(../Images/Logo.gif) no-repeat;

}

原来是用浮动+外边距布局的，将#LogoLink定位在距离顶部20像素，左侧0像素的地方；
如果用position的方法，CSS就应该这么写，首先给#Logo加上position:relative;，给#LogoLink加上position:absolute;,然后让#LogoLink距离上面20像素，左侧0像素，具体代码如下：

#Logo{
height:80px;
position:relative;/*相对定位*/
}
#LogoLink{
display:block;
width:173px;
height:46px;
background:url(../Images/Logo.gif) no-repeat;
position:absolute;
top:20px;
left:0;
}

怎么样效果和原来的一样吧，就是这么简单.
什么？CSS代码多了？的确，由原来的两句话，变成现在的四句，但是有没有发现，就靠Position我们就可以将Logo随意的定位于任何一个地方！这就是它的灵活的地方！如果在页面顶部在有一行加入收藏 | 设为首页 | RSS订阅如下图，你是不是也可以很方便的将它们定位于右上角呢~

（本文来源于图老师网站，更多请访问http://m.tulaoshi.com/webkaifa/）但是定位(position)有一个缺点，不会自适应内部元素的高度，所以平时我们在布局页面的时候，如果某个或者某些模块高度永远不变，就可以用定位，但是KwooJan建议大家布局页面的时候，还是要以Float为主，Position为辅！这样你才能做出高质量的页面。
=========================================================================
最后，请大家记住我这句话:
=========================================================================
好，我们有关页面布局的教程，算是已经完结。
如果能悟透每节课内容，你现在就可以拍着胸脯说我是DIV+CSS高手！哈哈，不过你要知道，DIV+CSS的叫法是不标准的，应该叫... ...
什么你想不起来了？！
咣当！~~

再说一句，在我们布局页面的时候，难免遇到一些IE BUG，这时候就需要CSS Hack(解决CSSbug的方法叫做CSS Hack)，这块也挺简单的，推荐一篇文章《不同浏览器CSS Hack写法》，如果还有不懂多看看论坛的板块，或者baidu，google，这些知识我就不再单独来一节课讲了。

谢谢大家对我的支持！Kwoojan在这里说声谢谢，希望大家能够继续支持论坛！

如果大家还需要我出什么教程就，告诉我！我会找时间给大家具体讲讲！

因大家强烈要求我写一篇关于浏览器兼容方面的课程，所以，我已将这节课写出来了，大家可以接着学！

看完这节课，可以到想提高，来练习板块，做一些练习题，进行巩固加强