相对定位:如果对一个元素相对定位的话,然后,可以通过设置垂直或水平位置,让这个元素相对于它的本身进行移动。属性并没有脱离文档流的,所以元素本身所占的位置会保留。。因此,移动元素会导致它覆盖其它框。(相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普通流中的位置。)
例子:
<html> <head> <style type="text/css"> h2.pos_left { position:relative; left:-20px } h2.pos_right { position:relative; left:20px } </style> </head> <body> <h2>这是位于正常位置的标题</h2> <h2 class="pos_left">这个标题相对于其正常位置向左移动</h2> <h2 class="pos_right">这个标题相对于其正常位置向右移动</h2> </body> </html>
效果:
绝对定位:绝对定位使元素的位置与文档流无关,因此不占据空间。绝对定位是对最近的已定位祖先元素,如果不存在已定位的祖先元素,那么是对最初的包含块。
例子:
<html> <head> <style type="text/css"> h2.pos_abs { position:absolute; left:100px; top:150px } </style> </head> <body> <h2 class="pos_abs">这是带有绝对定位的标题</h2> </body> </html>
效果图:
通过绝对定位,元素可以放置到页面上的任何位置。上面的标题距离页面左侧 100px,距离页面顶部 150px。
文档流定义:html的布局机制就是用文档流模型的,即块元素(block)独占一行,内联元素(inline)。不独占一行
如果要使用相对定位属性或是绝对定位属性,absolute+margin、float+relative、和relative+absolute。