html - 将文本添加到页面顶部，而不会将页面的其余部分向下推

Question

这应该是一个简单的答案。我对 CSS 的了解不够，不知道要寻找什么来解决这个问题。

我的雇主希望我为我们网站上的所有页面添加“跳过内容”链接，因为他有视力障碍，这将大大提高可访问性。

我想实现这里描述的方法: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;
}

绝对定位的元素从正常流中移除。文档和其他元素的行为就像绝对定位元素不存在一样，因此这会将链接添加到页面顶部，但不应导致页面其余元素移动。