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

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;
}

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