Knowledge Base Overview

I've just discovered a little style problem with the Facebook Like button. Somewhere within all the elements is a div that holds the iFrame element. This div element has an inline style "top: -2000px".

This is clearly not good, i.e. how you should hide an element with an offset!

Offset elements

You can easily hide an element from view with offset. Lets see what they did in Facebook

<div style="position: absolute; top: -2000px; ">
...
</div>

The position attribute takes the element out of the current flow. The negative value from the top attribute positions the element 2000px above its current place; which is relative to the parent usually defined with a "position: relative" style.

Left versus top

Now here's why this is not a good thing.

If such a element on your page is somewhere below the 2000px range the element suddenly becomes visible again in your webpage.

On some pages on this website I have decided to place the Facebook Like button at the end of the document which some times is longer than 2000px. I don't know when this started because this is created via their JavaScript and therefore it is more or less outside my influence. The only option: I have to move the Like button above the document.

A better solution is to move an element to the left. There is usually no way you can scroll ever to the left. With a style like "left: -2000px" an element will be always out of site.