【CSS】關於position:absolute布局，positionabsolute

【CSS】關於position:absolute布局，positionabsolute

在網頁中，如果需要left與top屬性生效，就必須為這個div的style屬性加入position:absolute，這樣，此div才能游離於整體的div布局之外，也就是說，你沒有加position:absolute之前，所有的div遵循我在《【CSS】關於div的對齊與網頁布局》（點擊開啟連結）所提到的，各種各樣布局。

例如下面的代碼：

<div style="position:absolute; left:100px; top:100px; width:20px; height:20px; border:1px solid #000000;"></div>

就得到如下的效果：

如果把position:absolute去掉，那麼left與top屬性是不起作用的，也就是下面的代碼：

<div style="left:100px; top:100px; width:20px; height:20px; border:1px solid #000000;"></div>

得到的效果是這樣的：

這個加了黑色方框的圖層，完全沒有按照預想的位置移動。

但不是說，這個left與top就是距離瀏覽器左上方的距離。它是距離上級div的距離，如果沒有上級div，那麼才是距離瀏覽器左上方的距離，就是說相對於body，這個網頁最大的圖層的距離。

比如下面的代碼：

<div style="position:absolute; left:100px; top:100px; width:20px; height:20px; border:1px solid #000000;"></div><div style="position:absolute; left:100px; top:100px; width:400px; height:400px; border:1px solid #000000;" ><div style="position:absolute; left:100px; top:100px; width:20px; height:20px; border:1px solid #000000;"></div></div>

得到的是如下的效果：

首先第一個圖層就是一開始就用來說明的圖層，position:absolute不受任何div的布局的影響，自己游離於體系之外，

然後，第二個圖層，沒有上級div，所以position:absolute之後的left與top就是自己的左上方相對於瀏覽器左上方的距離

最後，第三個圖層，處於第二個圖層裡面，其上級div就是第二個圖層，存在上級div，所以position:absolute之後的left與top就是自己的左上方相對於第二個圖層的左上方的距離。

另外，IE6是不支援position:fixed的，所以要實現那種懸停效果，不妨考慮利用position:absolute與javascript現實。