視覺隱藏元素的負頂部vs負左

Question

傳統的方式來直觀地隱藏某些東西，但允許屏幕閱讀器看到它，是left: -9999px。

爲什麼不是top: -9999px？

從技術上講，有些情況下某人可能會看到位於左側的東西（例如巨大的屏幕或僅縮小很遠）。但是瀏覽器永遠不會讓你看到身體的頂部。所以不是負面top更好？或者我錯過了什麼？

Answer 1

這site解釋說好聽一點：

它有時建議使用左定位內容：0像素; top：-500px（或類似）。雖然這是通過將內容 定位在頁面頂部上方來工作的，但如果隱藏元素包含鏈接或表單元素，則在接收到鍵盤焦點時，瀏覽器嘗試滾動到該元素 - 從而將瀏覽器滾動到頂部 頁面。這可能會導致有視力的鍵盤用戶感到困惑。通過將 直接定位到左側，瀏覽器將不會滾動到頁面頂部的 。應該注意的是，因爲鏈接和表單元素提供了功能，所以他們應該很少被隱藏在有視力的用戶看不到的。有遠見的用戶將無法看到哪個元素 當前具有焦點，因爲它隱藏在屏幕外。

因此，簡而言之，通過將內容移動到頁面頂部之上而不是超出左邊緣來隱藏內容，可能會在導航過程中導致跳轉。

Answer 2

有一種使用CSS剪輯屬性隱藏內容的新方法。 CSS clip屬性允許您使用top，right，bottom和left值指定絕對位置元素的尺寸，從而爲該元素創建一個盒子容器。通過將所有值設置爲0px，您可以隱藏該元素。

.hidden { 
    position: absolute; 
    clip: rect(0px 0px 0px 0px); 
} 

但是，根據瀏覽器的不同，可能會有所不同。這種方法被記入Jeff Burnz。你可以閱讀他的文章 - Using CSS clip as an Accessible Method of Hiding Content。