先來看看問題是怎樣的：
問題描述：就是乙個table，我們想實現的效果是hover到比如標題上面，展示乙個視窗的姑且，上面展示一些詳細的內容。這樣的效果，雖然用div列表也可以實現，但是table總有table的優勢，我們這裡就講table。
這時候就開動了，很多人的想法，很簡單嘛，首先td相對定位，然後裡面加個div就是外面那個視窗，絕對定位，完美解決。我只能說，太年輕了我們...
上面的思路是對的，但是呢，問題出現了......
我們先不說上面怎麼解決，先來一步步分析問題。首先什麼都不做，給td相對定位 position: relative; 給矩形框絕對定位position: absolute;
table美美的樣子（姑且美吧...）
然後我div加上了... chrome下面
線條都能夠看清楚了，這時候馬上想到，給div加z-index定位層級。這樣做，常規瀏覽器毛病，但是在ie7沒用，沒用，沒用！
但是得病了，得找到**，這個很明顯還是發生在層級上面。只能說明，後面的td層級比前面的高。那麼子元素就算層級在高，那麼父元素限制到了也高不過人家。終究翻不出五指山呀......
解決問題：
方法1：
既然層級出現在td上面，那麼就在這上面做文章，給td新增遞減的層級。具體怎麼做，那對於各位就簡單了。
看效果：
完美解決了。但是呢，這樣做有乙個問題，就是如果**有很多很多列，那麼首行的td層級不就很高了。和其他元素合在一起容易引起麻煩。
方法2：
給我們上面的彈窗div外面再加乙個div，作為相對定位。不給td上面加相對定位了。
.rel最終效果和上面一樣。這中方法算是比較完美的方法了，既沒有那麼多層級問題（層級多了很麻煩滴，自己後面都要懵），當然也不需要動用js，簡直完美。
最後：
td元素和div元素對position:relative樣式在各瀏覽器中的支援和表現形式不一致。相對定位在**元素上使用沒有定義，chrome 13期望有，firefox4上沒有。
css 相對|絕對(relative/absolute)定位系列（一）
html中的定位與層級設定
html中的position屬性可以對元素進行定位，通過position的不同的值，可以配合方位屬性，讓元素顯示頁面中的任何乙個位置。position有四個值 static，預設值，去除元素的定位。也就是不進行定位 relative，相對定位，元素相對於自身原來的位置進行定位。absolute，絕對...
CSS中五種定位及元素的層級
定位是一種更加高階的布局手段,通過定位我們可以將乙個元素擺放到頁面的任意位置 使用position屬性來設定定位 可選值 static 預設值 元素是靜止的 沒有開啟定位 relative 開啟元素的相對定位 相對定位的特點 1.元素開啟相對定位以後 如果不設定偏移量 offset 元素不會發生任何...
說說DIV定位的一些體會
為了內網改版的事兒，差不多忙乎了一周，今天總算是收尾了。忽然間就心血來潮，想嘗試下完全不依賴table做一張web，剛好還剩最後一件純html的活，本來用 也就是幾分種的事兒，實在不行最後抽些時間很快就能完成任務。我還算比較喜歡嘗試一些不熟悉的東西，所以興趣很濃，每想到這一弄差不多就是一天。體會就是...