十步學習css定位知識 http://www.barelyfitz.com/screencast/html-training/css/positioning/ 這個教程解釋了css布局中的以下問題： position:static, position:relative, position:absolute, float 作為例子的div的代碼：<div id="example"> <div id="div-before"><p>id = div-before</p></div> <div id="div-1"><div id="div-1-padding"> <p>id = div-1</p>
<div id="div-1a">
<p>id = div-1a</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.</p>
</div>
<div id="div-1b">
<p>id = div-1b</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan augue ipsum id lorem.</p>
</div>
<div id="div-1c"><p>id = div-1c</p></div> </div></div><!-- /id=div-1-padding /id=div-1 --> <div id="div-after"><p>id = div-after</p></div> </div> 1 position:static 這是所有元素的預設position， 表示：元素沒有做特殊定位處理，元素會出現在文檔中它應該在的位置。 #div-1 { position:static;} 2 position:relative相對元素本應該在位置的top,bottom,left,right。 #div-1 { position:relative; top:20px; left:-40px;} 可以看到div-1之後的元素div-after在div-1移動之後，沒有跟著移動，而是保持原來的位置，這是因為div-1在被移動之後，它還是佔著原來的位置。這個特性將在後面被使用，可以看到它的用處。 3：absoluteabsolute的元素將被從文檔中移出來（參加normal flow的概念），放在指定的位置。如，#div-1a { position:absolute; top:0; right:0; width:200px;} 因為div-a被移出來了，所以後面的元素也將向上移動，以填補div-a的空缺。可以看到div-a被移到網頁右上方了。其實，我們真正想要的是讓div-a位於相對div-1的右上方，而不是整個網頁。 IE有個bug：如果用百分數來表示width，IE會基於元素的父元素來計算這個值，而不是基於被移動的這個元素來計算。 4 positive:relative和positive:absolute為了將上面的例子糾正為div-a在div-1的右上方，這樣做：#div-1 { position:relative;}#div-1a { position:absolute; top:0; right:0; width:200px;}如果一個被指定為absolute的元素，其父元素是relative的，那麼就將相對於其父元素被移動，否則就將基於根項目，即body（？html）來移動。5 兩列的布局#div-1 { position:relative;}#div-1a { position:absolute; top:0; right:0; width:200px;}#div-1b { position:absolute; top:0; left:0; width:200px;}
用absolute
的一個好處： 可以按任何循序配置元素的位置，而不是受到元素在html中的聲明位置（前後關係）。如上，div-1b在div-1a左邊，但是聲明的時候，div-1a在前面。 但是上面也有一個問題，其他元素被遮住了，本例中就是div-after。6 兩列的absolute height為瞭解決上面的問題，可以顯式定義div-1的高度，#div-1 { position:relative; height:250px;}#div-1a { position:absolute; top:0; right:0; width:200px;}#div-1b { position:absolute; top:0; left:0; width:200px;}這樣，div-after又可以看見了。但是問題是，要估算一個正確的高度不容易。7 float通過浮動的方式來解決上面的問題：#div-1a { float:left; width:200px;}可以看到，不用定義div-1的高度，也可以看見div-after。Float常被用到映像的布局，以及其他複雜的布局。Float是進行複雜布局唯一可用的工具。8 多個浮動的列將相鄰元素都浮動，它們會一個接一個地排列。#div-1a { float:left; width:150px;}#div-1b { float:left; width:150px;} 9 用clear來float在7中使用了float之後div-1a被浮動，同時div-1b將div-1a包圍了。為了除去包圍，使用clear。#div-1a { float:left; width:190px;}#div-1b { float:left; width:190px;}#div-1c { clear:both;}關於float和clear的使用，請參加更多的資料。如，http://www.complexspiral.com/publications/containing-floats/ 10 上面的例子很簡單，並且沒有瀏覽器安全色問題。 這個資源很好：
Relatively Absolute另外，
- BarelyFitz Designs Open-Source Software Projects
- BarelyFitz Designs Screencasts
