《
CSS实例 定位(position)页面定位详解》文章地址：http://www.tfxk.com/wangyesheji/jianzhanjingyan/03023332R013.htm
--> [
网站建设之]CSS实例:定位(position)页面定位详解
注：在做这节教程的时候，我又上网查了相干材料，看了大量的文章，做了大批的测试，最后总结出下面这些文字，洋洋洒洒一整篇，不过需要大家一句话一句话的看，一定要细心喽！还有对于课程中的说的,
CSS定义的下拉菜单代码，最好一边看，一边练，不练绝对看不懂！
定位(position)布局页面说容易十分容易，只须要记住这节课最后一句话就可以了，说艰苦，那是相称的难理解，需要必定的耐烦，不过还好，KwooJan给大家总结的已经很艰深易懂了。
如果下面的文字切实是无奈懂得透，那就记住这节课最后总结的一句话“假如用position来布局页面，父级元素的position属性必需为relative，而定位于父级内部某个地位的元素，最好用absolute，由于它不受父级元素的padding的属性影响，当然你也能够用position，不外到时候盘算的时候不要忘却padding的值。&rdquo,
CSS学习教程 学习CSS的宽度width;
好，上课！
任何元素的默认position的属性值均是static,静态。这节课重要讲讲relative（绝对）以及absolute（相对）。
【position:absolute】
意思是：他的意思是绝对定位，他默认参照浏览器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位，有以下属性：
1)如果没有TRBL，以父级的左上角，在没有父级的时候，他是参照浏览器左上角,如果在没有父级元素的情况下，存在文本，则以它前面
的最后一个文字的右上角为原点进行定位但是一直开文字，笼罩于上方。
2)如果设定TRBL，并且父级没有设定position属性,
CSS字体：详解font属性，那么当前的absolute则以浏览器左上角为原始点进行定位，位置将由TRBL决议。
3)如果设定TRBL，并且父级设定position属性(无论是absolute还是relative)，则以父级的左上角为原点进行定位，位置由TRBL决定。即便父级有Padding属性，对其也不起作用，说简略点就是：它只保持一点，就以父级左上角为原点进行定位，父级的padding对其基本没有影响。
以上三点可以总结出，若想把一个定位属性为absolute的元素定位于其父级元素内,
css字体设置(不同浏览器设置效果)，只有满足两个条件，
第一：设定TRBL
第二：父级设定Position属性
上面的这个总结无比重要，可以保障你在用absolue布局页面的时候,
CSS如何自定义滚动条样式，不会错位，并且跟着浏览器的大小或者显示器辨别率的大小，而不发生改变。
只有有一点不满意，元素就会以浏览器左上角为原点，这就是初学者轻易出错的一点,
CSS如何控制标题字符多余部分用…省略号表示，已经定位好的板块，当浏览器的大小转变，父级元素会随之改变，然而设定Position属性为absolute的板块跟父级元素的位置产生改变，错位了，这就是因为此时元素以浏览器的右上角为原点的起因。
初学者很容易犯错的是，不明白Position属性为absolute的板块，若想定位到父级板块中，并且当浏览器的大小改变或显示器的分辩率改变，布局不发生改变，是需要知足两个前提的，只要有一点不满意，元素就会以浏览器左上角为原点，从而导致页面布局错位。
【position:relative】
意思是相对定位，他是默认参照父级的原始点为原始点，无父级则以文本流的次序在上一个元素的底部为原始点，配合TRBL进行定位，当父级内有padding等CSS属性时，当前级的原始点则参照父级内容区的原始点进行定位，有以下属性：
1)如果没有TRBL,
CSS外部引用使用link与import的区别，以父级的左上角，在没有父级的时候，他是参照浏览器左上角(到这里和absolute第一条一样)，如果在没有父级元素的情形下，存在文本，则以文本的底部为原始点进行定位并将文字断开(和absolut不同)。
2)如果设定TRBL，并且父级没有设定position属性，仍然以父级的左上角为原点进行定位(和absolut不同)
3)如果设定TRBL,
CSS备忘录，并且父级设定position属性(无论是absolute仍是relative)，则以父级的左上角为原点进行定位，位置由TRBL决定(前半段和absolut一样)。如果父级有Padding属性,
CSS基础：设置文本的背景颜色，那么就以内容区域的左上角为原点，进行定位(后半段和absolut不同)。
以上三点可以总结出，无论父级存在不存在，无论有没有TRBL，均是以父级的左上角进行定位，但是父级的Padding属性会对其影响。
综合上面对relative的叙述，我们就可以将position属性为relative的DIV视成可以用TRBL进行定位的的普通DIV，或者说只要将我们平时
布局页面的div的CSS属性中加上position:relative后，就不仅是用float布局页面了，还可以用TRBL进行布局页面了，或者说加上
position:relative的DIV也可以像一般的DIV进行布局页面了，只不过还可以用TRBL进行布局页面。但是position属性为absolute不可以
用来布局页面，因为如果用来布局的话，所有的DIV都相对阅读器的左上角定位了，所以只能用于将某个元素定位于属性为absolute的
元素的内部某个位置，这样咱们就可以总结比拟主要的论断
属性为relative的元素可以用来布局页面，属性为absolute的元素用来定位某元素在父级中的位置
既然属性为absolute的元素用来定位某元素在父级中位置，就少不了TRBL，这时候依据一开端讲的absolute的第三条，如果父级元素不
position属性那么absolute元素就会脱离父级元素，但是如果是布局页面，父级元素position的属性又不能为absolute，不然就会以浏览
器左上角为原点了,
CSS基础：了解闭合浮动元素，所以父级元素的position属性只能为relative！
=============================================
总结：如果用position来布局页面，父级元素的position属性必须为relative，而定位于父级内部某个位置的元素，最好用absolute，因为它不受父级元素的padding的属性影响，当然你也可以用position，不过到时候计算的时候不要忘记padding的值。
============================================= Tag： 定位 position 定位 position
(责任编辑：网站建设)
CSS实例 定位(position)页面定位详解相关文章