You can use absolute positioning instead. This removes the element completely from the visual formatting "flow"; it is positioned independently (in its own "layer"):

Code: Select all

ul#skipLinks {
position:absolute;
top: -100em;
z-index: 2;
}

...and then override this by moving the links back into view when they receive focus. This way, people using a visual browser can still use them as keyboard navigation (although most won't realise they exist, of course). You need to make sure they stand out against the background after positioning. Here's my code:

Code: Select all

ul.skipLinks a:focus {
    position: absolute;
    top: 5.5em;
    color: black;
    background: yellow;
    border: 2px solid red;
    font-size: 200%;
    padding: 0.5em;
}

Who knows? It might help some users of visual browsers, especially if you explain this feature somewhere on your site.