alienlebarge/skipLinks.css

## skipLinks.css
.hide {
    text-indent: -999em;
    margin: 0;
    padding: 0;
    height: 0;
}

#skipLinks a:active,
#skipLinks a:focus,
#skipLinks a:hover {
    display: block;
    position: fixed;
    width: 20%;
    top: 30%;
    left: 40%; /* 50% - width/2 */
    text-indent: 0;
    z-index: 100;
    padding: 0.5em;
    background-color: #eee;
    border-radius: 0.25em;
    border: 1px solid #ccc;
}

## skipLinks.html
<!DOCTYPE html>
<html>
<head>
    <title>Skip links</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="skipLinks.css" />
</head>
<body>

    <div id="skipLinks" class="hide" role="navigation">
        <h1>Skip links</h1>
        <ul>
            <li><a href="#content">Skip to content</a></li>
            <li><a href="#navigation">Skip to navigation</a></li>
        </ul>
    </div>

    <h1><a id="content">Content</a></h1>
    <p>Content here ...</p>


    <h2><a id="navigation">Navigation</a></h2>
    <ul>
        <li>Nav 1</li>
        <li>Nav 2</li>
        <li>Nav ...</li>
    </ul>

</body>
</html>
	.hide {
	text-indent: -999em;
	margin: 0;
	padding: 0;
	height: 0;
	}

	#skipLinks a:active,
	#skipLinks a:focus,
	#skipLinks a:hover {
	display: block;
	position: fixed;
	width: 20%;
	top: 30%;
	left: 40%; /* 50% - width/2 */
	text-indent: 0;
	z-index: 100;
	padding: 0.5em;
	background-color: #eee;
	border-radius: 0.25em;
	border: 1px solid #ccc;
	}
	<!DOCTYPE html>
	<html>
	<head>
	<title>Skip links</title>
	<meta charset="UTF-8">
	<link rel="stylesheet" type="text/css" href="skipLinks.css" />
	</head>
	<body>

	<div id="skipLinks" class="hide" role="navigation">
	<h1>Skip links</h1>
	<ul>
	<li><a href="#content">Skip to content</a></li>
	<li><a href="#navigation">Skip to navigation</a></li>
	</ul>
	</div>

	<h1><a id="content">Content</a></h1>
	<p>Content here ...</p>


	<h2><a id="navigation">Navigation</a></h2>
	<ul>
	<li>Nav 1</li>
	<li>Nav 2</li>
	<li>Nav ...</li>
	</ul>

	</body>
	</html>