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

这应该是一个简单的答案.我对CSS知识不足以了解要解决这个问题的方法.

我的雇主希望我添加Skip to Content链接到我们网站上的所有页面,因为他有视力残疾,并且会提高很多可访问性.

我想实现这里描述的方法:http://webaim.org/techniques/skipnav/#focus

我的问题是,当链接获得焦点时,由于文本突然出现,页面布局的其余部分会被按下几个像素.我希望文本显示在页面顶部,而不会影响它下面的布局.我可以以某种方式修复我的布局的位置吗?

整个布局已经用div容器包装,所以我猜这只是将一个CSS属性添加到该容器中来修复它的位置.

提前致谢.

最佳答案
你应该能够通过绝对定位链接来做到这一点:

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

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

转载注明原文:html – 将文本添加到页面顶部,而不会向下推送页面的其余部分 - 代码日志