Absolute Positioning Inside Relative Positioning
A page element with relative positioning gives you the control to absolutely position children elements inside of it.
To some, this is obvious. To others, this may be one of those CSS “Ah-ha!” Moments. I remember it being a big deal for me when I first “got it”.
Here is a visual:
The relative positioning on the parent is the big deal here. Look what would happen if you forgot that:
Might not look like a big deal in this small example, but it really is a significant change. What is happening is the absolutely positioned elements are positioning themselves in relation to the body element instead of their direct parent. So if the browser window grows, that one in the bottom left is going to stick with the browser window, not hang back inside like his well behaved brother from the first image.
Once you “wrap” your head around this concept (rim-shot) you will find little uses for it all over the place, and start noticing examples of other places using it. It’s like when you learn a new word and then you start hearing it everywhere. Yeah.
How about some examples?
I’d be delighted.
|
A “close” button you always want positioned in the upper left of a box (to replicate an operating system window). |
|
A “home” button placed in the upper right of the window so that your users never feel too lost |
|
A reminder on a sign up form to remind users that if they are already members to sign in above. |
|
“Back to top” links to be placed in the lower right of each big block of text. |
Loading ...
1
Ah ha! Thanks Chris.
Comment by Zach LeBar — June 16, 2008 @ 6:30 am
2
This is definitely MY “a-ha!” css moment, when i realised this, i realised i could do anything.
Is it true that support for “position:” isn’t too solid across browsers? because i used to do all my page builds with positioning, and got told that, due to diminished support, i should always try to organise my columns using floats.
Comment by Daniel — June 16, 2008 @ 6:31 am
3
The abs-positioned elements are positioning themselves against the first ancestor not static postitioned, and there is none here, so they position against html (this can be seen by adding margin-top to body, and the Back-Home image is not moved)
Comment by hdh — June 16, 2008 @ 9:26 am
4
The preview looks awfull in safari, its really messed up o.o Did u test it? Or is it my safari 4.0 developer edition =/
Comment by V1 — June 16, 2008 @ 9:41 am
5
It’s looking OK in Safari 3.1.1 to me. The “sign in above” button is a little higher than it should be. Might be a difference in how safari renders it’s fieldsets.
Comment by Chris Coyier — June 16, 2008 @ 9:46 am
6
This trick can also be used for making image maps with CSS. This can be much more flexible and do more stuff than the usual html image map.
Comment by Adam — June 16, 2008 @ 10:36 am
7
This is something that I always get the wrong way around just for semantic reasons; I always think that I should be positioning child elements in RELATION to an ABSOLUTE, but in effect they are absolute items in relation to a relative, which seems wrong!
Comment by Epic Alex — June 16, 2008 @ 1:05 pm
8
I am a bit like Epic. I thought that apply relative to something made that something relative to what ever contained it. I had kind of worked out that I was wrong just the other night but it is good to hear someone say it as it still didn’t seem right in my logic.
Thanks
Comment by Morgan Daly — June 16, 2008 @ 1:10 pm
9
Good post. I recently had this “a-ha” moment as well. Really makes things easier. I was wondering why my boxes would position way to the far left of the browser window when I had them inside another box. But a-ha! I needed to give the outer box a relative position.
Sometimes the supposed simple things need to be explained with clear words and a good diagram.
Comment by Rick — June 16, 2008 @ 6:12 pm
10
Oh my goodness! My brother asked me a question similar to this recently… This is definitely an a-ha. I was under the impression that the default was relative so I didn’t realise this happened… there you go!
I’ll send my bro the link
Comment by kristarella — June 16, 2008 @ 7:24 pm
11
I had such a moment when I found that absolutely positioning something without parameters (right, top etc.) would leave it where it would go normally, but take it out of the flow, so that it would end up on top of the other elements. I used it to have a transparent-backed image overlap some divs slightly.
Comment by Ogremindes — June 16, 2008 @ 8:50 pm
12
Brilliant examples, Chris. Well done!
Comment by Eric Wendelin — June 16, 2008 @ 10:08 pm
13
I’ve been doing CSS for some time now, and this was definitely an important lesson when I learned it only a week or two ago.. However your post might help me actually remembering it.. Thank you for that..!
Comment by Benjamin A. Wendelboe — June 17, 2008 @ 1:08 pm
14
hm, totally OT, but do you by any chance know what that grey font is on your icon examples, it’s a really nice one…?
Comment by James — June 18, 2008 @ 2:43 am
15
@James: “Agenda”
Comment by Chris Coyier — June 18, 2008 @ 7:13 am
16
Perfect timing. Is there a way to center an element horizontally as well as place it vertically at the bottom?
Comment by chrisL — June 18, 2008 @ 3:56 pm
17
Another Ah-Ha and I LOVE YOU, thanks.
Comment by smitty — July 18, 2008 @ 3:01 pm
18
Ah-ha!
Comment by Daniel — July 20, 2008 @ 10:56 am
19
Thx for this tut. I always have a problem with positioning using CSS. Now, I got more knowledge.
regards,
AM
Comment by agencja modelek — July 23, 2008 @ 6:45 am
20
I guess you really do learn something new every day (as long as there are sites like this
Comment by Tom Leo — August 10, 2008 @ 4:56 pm