將文本添加到頁面的頂部，而頁面的其餘部分被壓下

Question

這應該是一個簡單的答案。我只是沒有足夠的知識，在CSS中知道要尋找什麼來解決這個問題。

我的僱主希望我將Skip to Content鏈接添加到我們網站上的所有網頁，因爲他有視覺障礙，並且會提高可訪問性。

我想要實現這裏所描述的方法：http://webaim.org/techniques/skipnav/#focus

我的問題是，當鏈接獲得焦點，頁面佈局的其餘部分被幾個像素下推由於文本突然出現。我想讓文本顯示在頁面的頂部，而不影響它下面的佈局。我能否以某種方式修復佈局的位置？

整個佈局已經包裝了一個div容器，所以我猜測它只是一個CSS屬性添加到該容器，將修復它的位置的問題。

在此先感謝。

Answer 1

你應該能夠做到這一點絕對定位的鏈接：

#skip a:active, #skip a:focus 
{ 
position:absolute; 
top: 0px; 
width:100%; 
height:auto; 
text-align: center; 
} 

絕對定位的元素從正常流量中刪除。文檔等元素表現得像絕對定位的元素不存在，那麼這將增加鏈接就在頁面的頂部，但應該不會造成頁面元素的其餘部分移動。