Question

I am positioning an anchor like so:

#test-link {
    position: relative;
    bottom: 100px
}

As I need it so that when I visit #test-link the page jumps down to that particular section, but 100px higher. Otherwise the page scrolls too far down for what I need.

This works fine in decent browsers, however in IE7, 8 and 9 the relative positioning gets completely ignored.

I’ve tried different ways to fix it such as adding text to the anchor as well as various CSS properties (e.g. display: block) however nothing makes any difference.

Answer 1

Sure enough, IE7 through IE10 don’t go to the relatively-positioned element (but rather to its natural location). There is one exception, IE8 worked just as I had expected. Nearly every browser I checked other than IE worked as expected as well.

This appears to be an issue with relative positioning, as attempting this with absolute positioning works just fine in IE6 through IE10. This of course doesn’t help your situation since you’re trying with relative positioning.

The only solution I have found after playing around with this for a while is to replicate relative positioning using margins:

#movedElement {
    display: block;
    margin: -100px 0 100px;
}

This gave smiliar results to those we see in other browsers, in all versions of IE. This isn’t ideal, I understand, but it may suffice until better information is found.

I’ll continue to research this, and return when I learn more.

You Could Use padding for Padding

In the meantime, another common approach to adding some whitespace before your target-area is to add margins to expand the space above that element. This is what I’ve done in the example viewable online at http://jsfiddle.net/Px6r9/1/show/#foo.

#paddedContent {
    padding-top: 50px; /* Adds whitespace above content */
}