<html> | |
<head> | |
<style type="text/css"> | |
a { | |
border: 2px solid red; | |
position: relative; | |
} | |
a span.relative { | |
border: 2px solid blue; | |
white-space: nowrap; | |
position: relative; | |
top: 10em; | |
} | |
a span.absolute { | |
border: 2px solid green; | |
white-space: nowrap; | |
position: absolute; | |
top: 12em; | |
} | |
</style> | |
</head> | |
<body> | |
<div> | |
Both <a href="#" id="link">this and <span class="relative">this should have correctly placed focus rings</span> <span class = "absolute">but not this</span>.</a> | |
</div> | |
<script> | |
document.getElementById('link').focus(); | |
</script> | |
</body> | |
</html> |