Anyone who has used CSS for a while will know about the merits of absolute and relative positioning. To recap:
position: relative allows an element to be shifted from its original position either horizontally (using left or right) or vertically (using top or bottom).
position: absolute allows an element to be positioned with respect to a containing block using left, right, top or bottom (the containing block is the nearest ancestor node with a position of relative, absolute or fixed).
Positioning nodes is therefore straightforward, e.g.
HTML:
<div id="outer">
<div id="inner"></div>
</div>
CSS:
#outer
{
position: relative;
width: 200px;
height: 200px;
margin: 20px auto;
border: 2px solid #c00;
}
#inner
{
position: absolute;
left: 50px;
top: 50px;
width: 96px;
height: 96px;
background-color: #ddc;
border: 2px solid #00c;
}
(The actual width and height of the inner block will be 100px owing to the addition of the border).
The following boxes are rendered in every modern browser (including IE6):
Less well known is that you can apply all the left, right, top and bottom properties at the same time. The following CSS will render the inner element identically:
#inner
{
position: absolute;
left: 50px;
right: 50px;
top: 50px;
bottom: 50px;
background-color: #ddc;
border: 2px solid #00c;
}
The width and height of the inner box will remain 100px, but we do not need to need to explicitly set the dimensions.
This could be useful when:
- the spacing around the element is more critical than the width or height. You can also use negative
left,right,topand/orbottomproperties to make the inner box larger than its outer parent. - you have multiple inner elements with differing borders and padding but need consistent outer spacing. This method allows you to create a single style for all those elements.
JavaScript animations can also benefit since it can be easier and quicker to resize an element if you do not need to calculate the resulting width and height, e.g.
// expands and contracts the inner box
window.onload = function() {
var inner = document.getElementById("inner");
var offset = 100, dir = -1;
setInterval(function() {
inner.style.left = inner.style.right = inner.style.top = inner.style.bottom = offset+"px";
offset += dir;
if (offset == 0 || offset == 100) dir = -dir;
}, 10);
}
A note about browser compatibility: this technique works in all the main browsers, except IE6 which only understands explicit widths and heights. There’s a surprise!
Related posts:
- CSS Font-Sizing: a Definitive Guide CSS font sizing appears to be easy until you try...
- Styling the html and body Elements One of the most common ways to begin a...
- Progressive Enhancement Techniques 2: the CSS In the second of a 3-part series, Craig explains how...
- Elements Of Design: Shape Last week Jennifer looked at the humble, yet versatile, line...
- The Primary Design Elements: A New Series In the first of a five-part series on Design Elements,...
Wait a minute… did you just imply IE6 is a modern browser!?
June 2nd, 2009 at 6:17 am
That is a really nifty fact. I hate trying to calculate width and height when all I care about is spacing from the parent container.
June 2nd, 2009 at 9:40 am
Wow, I’m surprised, this is actually a pretty useful tip. I’ll have to remember this one. Thanks!
June 2nd, 2009 at 11:21 am
Thanks for this information.
I will be very helpful.
Greetings
David Hernandez
June 2nd, 2009 at 4:09 pm
Greate tip, I’ve never thought this way!
June 2nd, 2009 at 8:16 pm
Wow, I didn’t know that! This is very cool and seemingly useful feature. I hope I get the opportunity to try it out soon!
June 3rd, 2009 at 5:54 am
I did not know this… Pretty cool!
I can see the value in this when defining e.g. three column layouts. You could make the three columns the same height (something I regularly struggle with) by making them depend on the height of the surrounding div. I have to think this through, but I bet there are brilliant uses for this…
June 3rd, 2009 at 5:38 pm
I tried this a few years ago and must have tested it only in IE6 at the time and was quite disappointed. another great one to know when we can ditch IE6.
June 4th, 2009 at 1:45 am
Interesting. But in this case, instead of on the inner block:
left: 50px; right: 50px; top: 50px; bottom: 50px;You could just:
margin: 50px;June 4th, 2009 at 3:00 am
@sitehatchery
The #inner element is absolutely positioned; just using a margin will set it’s width and height to the whatever the content requires. In the example above, it’s nothing – you will just get a small blue dot.
If #inner is set to static or relative, you would get a line – it’s a block element so the width will be 100% but the height is still determined by the content.
June 4th, 2009 at 5:59 pm
Craig, actually it works in IE 6 + and Firefox.
http://realtimedar.com/test.html
June 5th, 2009 at 5:44 am
Scrap that. I see what you are saying. The point is, you don’t have to set the height and width. Hmm… that is useful.
June 5th, 2009 at 5:47 am
Dude thanks i was confused about this relative and absolute concept. now i am happy, i can do lot with this……….
June 14th, 2009 at 8:02 pm