CSS: Absolute position in a relative block; and IE’s hasLayout property

January 17, 2008 on 2:19 pm | In CSS | 1 Comment

What a long title for a post! And it sums up what I’m writing about this time. I’m going to talk about a semi-commonly known CSS trick, as well as a potential problem with Internet Explorer 6 with it and the fix for that. Most advanced CSS coders/web designers will be familiar with this trick, but the beginner to intermediate readers will certainly benefit from this.

CSS Positioning

If you’re reading this, you probably know what CSS positioning is.

When you define the CSS of a div block with position: relative, any top, left, bottom, right attributes you give it will move the block accordingly, from its original position (where it would be if you didn’t move it). Giving it top: 20px will move it 20px below where it would be.

On the other hand, if you define a div block with position: absolute, you are essentially telling it exactly where it should appear on the screen. Giving it top: 0px and left: 0px will put the block at the very top left corner of the page. It also effectively “floats” the element and put it on top of any page element that are in the way, but don’t confuse this with the float attribute in CSS. Also, you can control which element appears on top with z-index, if you have more than one.

That said, let’s get into what I’m really talking about this time…

Continue reading CSS: Absolute position in a relative block; and IE’s hasLayout property…