Position:relative for anchors in webkit broken. Work-arounds?

Question

In our project we used the following method to link users to some anchorred area on the page:

<span style="position: relative; top: -100px; z-index: -1; visibility: hidden;"
                   id="anchor">&nbsp;</span>

This was used to leave a little space before the exact anchorred element like a form.

http://gyazo.com/9f714647b516254f5220910b0cace532.png

But since some late version of Safari this has broken and browser is positioning at the initial position of the element with no regard to the relative position.

Maby you have met this feature/bug too and have some work around to propose or can point out why my method is bad. Thx!

Answer 1

Why don’t you just add the ID attribute to the element in question, i.e. FORM? If you want to add vertical spacing before the form, you can use CSS:

<form id="anchor" style="margin-top: 100px;">
 …
</form>

Issue eliminated, and much cleaner code :)

Answer 2

Yep! hanks to the incorrect but usable answer by Developer Art i got the solution!

If i apply id and relative position to the DIV anchoring to the #id starts working with telative scroll!