是以,固定定位存在一些微妙的問題,這使得這一點特别困難.
固定元素與浏覽器視點相關
聲明position：fixed時,任何其他位置規則(如left或top)都會将标題相對于視口本身 – 螢幕的左上角.您也不能使用任何技巧使其相對于其父級,因為隻要頁面滾動它就會在同一個位置.這可能不會影響您的網頁,但仍需要考慮.
固定元素在移動浏覽器中無法正常工作
我不知道你的具體用例,但這是值得深思的.
固定定位從正常流動中移除元素
據我所知,這就是造成這個問題的原因.聲明position：fixed時,元素實際上會突破頁面元素的正常布局和位置,現在可以在自己的唯一塊中工作.
從CSS2 spec(這也适用于固定定位)：
In the absolute positioning model, a box is explicitly offset with respect to its containing block. It is removed from the normal flow entirely (it has no impact on later siblings). An absolutely positioned box establishes a new containing block for normal flow children and absolutely (but not fixed) positioned descendants. However, the contents of an absolutely positioned element do not flow around any other boxes. They may obscure the contents of another box (or be obscured themselves), depending on the stack levels of the overlapping boxes.
這很好,因為你希望标題浮動在表格之上,但也很糟糕,因為在大多數浏覽器中,它與表格的其餘部分分開布局.
可能的修複
>如果頁面上唯一的東西是您的表格,您應該能夠将标題設定為使用寬度：100％并應用與表格其餘部分相同的單元格寬度.但是,可能很難使大小調整得恰到好處,尤其是在調整視窗大小時.
>使用一些簡單的JavaScript來顯示标題.我知道你想用HTML和CSS保持這個(我通常也這樣做),但是JavaScript非常合适,因為浮動标題不應該是使用網站的重要部分.它應該适用于支援它的浏覽器,但那些不支援它的應該仍然可以使用該表. CSS-Tricks有一個非常好的技巧
(http://css-tricks.com/persistent-headers/),但您可以通過在您最喜歡的搜尋引擎上查找“粘性表格标題”來找到其他人.