The rest of the skip link styles depends on your design vision. The most important thing is the link should be clearly visible in keyboard focus state.
WebAIM recommends not to show the link unexpectedly. This can confuse keyboard users who are seeing the interface. A smooth animation will fix this. Then the link will move out from behind the edge of the screen and move back in when there's no longer any focus on it.
You can place the links on any part of the screen. They're often placed in the top left corner, but this isn't an ironclad rule.
I've created a list of sites where the skip-link pattern is used. Press Tab for navigation on Windows and Tab or Option Tab on macOS.
Often, the simpler something seems, the more complicated it's in reality. This happened with the skip link too.
There are quite a few ways to develop the skip link. All of them have pros and cons. I would go for the classic implementation with the link leading to the main block or the h1 element with tabindex="-1". As for styles for hiding the link, all the options are good. You can choose whichever one suits your project best. I prefer to use absolute positioning and the left property with a negative value.
Thanks to Vasily Dudin for help with editing ❤️