homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

CSS positioning tutorial
position:relative means WHAT exactly?

 4:22 pm on Apr 10, 2002 (gmt 0)

anybody got a good link handy for a tutorial on relative positioning? I figure it's time I jumped in :)



 4:56 pm on Apr 10, 2002 (gmt 0)

ok - I figure I got is mostly figured. Just one question:

With relative postioning - the element being positioned is relative to the previous element. That simply means it's relative the last element in the html right?

(sheesh - maybe it's too early in the morning but my brain just won't think in CSS yet :))


 5:08 pm on Apr 10, 2002 (gmt 0)

Oil, I'm bumping around on css, too. Not a tutorial exactly...

Relative positioning moves an element relative to its original position [w3schools.com]


 5:33 pm on Apr 10, 2002 (gmt 0)

You got it, oilman!

There are 5 possible values for position: static, relative, absolute, fixed and inherit.

means position generated as normal, just the way you would expect given the flow of the HTML. So you seldom state it explicitly.

means the "box" that contains the positioned element is offset from its static position in the rendering flow of the document. This means it may overlap the position of other rendered elements.

means the element is offset in relation to its CONTAINING block. If the containing block is <body>, this means you are just choosing its coordinates on the page. If the containing block is <div> or some other block-level element, you are positioning it relative to that block.

The most poorly supported value. When it is supported, the element stays fixed in relation to the viewport - the edges of your monitor. When browser support is up to par for this value, we will be able to generate frames-like behavior without the drawbacks of actually creating a frameset.

A nice simple example of fixed behavior (and a test to see how your browser support measures up) can be found on the W3C pages [w3.org]. The blue rectangle that says "W3C Recommendation" is position fixed. If it scrolls with the page, your browser doesn't support position:fixed properly.

Netscape 4 renders the rectangle inline and it just scrolls away. Netscape 6 tries to do things right, and on this page all IS fine. But in more complex layouts the "fixed" image doesn't really stay fixed as you scroll - instead it renders over and over in a jittery way that is hard on the eyes! I have a hunch that the problems only show up if your DTD puts NN6 in quirks mode.

Opera 6 support is flawless, from what I've seen. However, IE6 doesn't even try to render the rectangle - you never see it! Here's one case where Netscape 4 does a better job than IE 6!

When an element "inherits" color or size, all seems well. But what is a browser supposed to do when it gets told position:inherit ? I haven't been able to figure this one out yet, and even the O'Reilly CSS book is vague.

Since we can't depend on browser behavior to show us, does anyone have a good handle on this?

(edited by: tedster at 11:27 pm (utc) on April 11, 2002)


 6:12 pm on Apr 10, 2002 (gmt 0)

Yes, relative positioning is just that: relative. It is based off of normal page flow.

Where it can get confusing is that a element positioned relatively can take its relattive postion based off of mulitple "preceding" elements.

top:50px; will place the "relative" element 50px below the preceding element while left:100px; will move the element 100px to the left of the body margin.

It can quickly get a more than a little bewildering if you overlook the fact, that position:relative, like postion:absolute, can remove your element from the normal page flow, if you assign "top:xx" (use is the best teacher!)

If you only use "left:xx" the elements that follow will continue in normal page flow.

Dependent on the design, you may find yourself in a world of position:absolute, position:relative, float and yes... even a few elements that have simply been left normal page flow.

Here is an example that uses them all for a fairly complex liquid layout: [ismsound.com...] since it uses an example of position:absolute; right:0px; NN4.x will choke, but Opera, IE, Netscape6/Mozilla all will cope.

The quickest way to learn is just to start doing... work with test pages, write your CSS by hand and view after each change to see the results. It does make sense after awhile... sort of! ;)


 7:58 pm on Apr 10, 2002 (gmt 0)

Thanks for the question and for the answers posted.

I have never fully understood relative positioning. Now maybe I have a fighting chance



 3:49 pm on Apr 11, 2002 (gmt 0)

ok - I think I've almost got it.

I've got 5 divs defines: header, mainbody, nav1, nav2 and footer. I'm trying to get them to layout like:

Nav1 ¦ main body
Nav2 ¦ over here

I've got it almost all working but I can't get Nav2 to position relative to Nav1 and I can't get the footer to position relative to the mainbody ie: it needs to float with body content being long or short. Of course I'm trying to do this with the mainbody div being at the top of the html. What am I missing?


 5:05 pm on Apr 11, 2002 (gmt 0)


I don't believe that, using the current state-of-the-art css, you can do a footer that floats and spans multiple columns [webmasterworld.com].


 5:07 pm on Apr 11, 2002 (gmt 0)

<--------- heads back to full table layout....


 5:34 pm on Apr 11, 2002 (gmt 0)

Oilman, there are a number of ways to approach this: One way would be to nest your nav divs inside of your main div and let normal page flow "push" your footer along.

Another would be to use position:absolute for your nav divs (this would let you place the code at the end of your html document leaving your spider text up top...)

You could assign margins and/or padding to keep your main div content spaced appropriately. Here again, normal page flow will move your footer div along. You can use postion:relative of margin-top to maintain your desired spacing.

Are you building a liquid design or static? Either way, it can be accomplished, and the only way to learn is to "work it out."


 5:53 pm on Apr 11, 2002 (gmt 0)

thanks papabaer - yeah I won't give up just yet. This is basically my first foray into some real css and I've bitten off a pretty big chunk. I should prolly chew on it a bit more. I figure I'm pretty close.

<edit> fixed up some pretty horrible grammer ;)</edit>

(edited by: oilman at 7:25 pm (utc) on April 11, 2002)


 6:32 pm on Apr 11, 2002 (gmt 0)

I'm running alongside you here, Oilman.

The more I dig, the more I find it can do.
(if wasn't for NN4.* I'd be digging deeper:))


 8:39 pm on Apr 11, 2002 (gmt 0)

One small warning though...
once you start to feel the power behind it, you won't want to stop!

Where's pageone? Can I get a witness? ;)


 8:49 pm on Apr 11, 2002 (gmt 0)


Therein lies the true problem with CSS. The saying goes something like "just because you can, doesn't mean you should".

Well, with all the power of CSS, when I use it, I tend to want to 'over do it'.

Kinda like blinking text in HTML. You want to tweak things so much that it becomes obsessive and soon you find yourself locked up in the dark corner of your office talking to yourself about relative positioning.

It is fun though isn't it!?


 8:54 pm on Apr 11, 2002 (gmt 0)

Yes, there is a great temptation when harnessing CSS to try to control EVERYTHING...

Sometimes the best "control" is to just let things be....

Refinement of the techinique is the desired goal, accomplishing more, with less.

Before I go all "Zen" on y'all... I bid adieu! :)


 8:55 pm on Apr 11, 2002 (gmt 0)

well - I got my little project working for IE and Opera. Of course it blows up in NN. It's kinda weird NN was at least recognizing the css while I was changin stuff around but I must've changed a bit too much cuz now NN ignores the css entirely - won't even render the fonts properly.

Gonna go crack a beer and then have another run at it.


 11:03 pm on Apr 11, 2002 (gmt 0)

> Where's pageone? Can I get a witness?

Man, I haven't been to sleep since you first arrived at this board! CSS this, CSS that, CSS everywhere! As I stated in another thread, I am exhaucssted!

> You want to tweak things so much that it becomes obsessive and soon you find yourself locked up in the dark corner of your office talking to yourself about relative positioning.

Got enough room in that corner for the rest of us? Then all of us can chant together in unison!


 11:10 pm on Apr 11, 2002 (gmt 0)

Hey oilman, that footer issue has perplexed me also! To the point where I just figured out another way to do it by tweaking the design a little bit. My footer is now an include element that I just position right at the bottom of my content <div>.

I know, some designs won't work with this layout but you know what, I needed sleep and had to figure out a way and it was the best way at the time. I took the easy way because my doctor told me to!


 11:15 pm on Apr 11, 2002 (gmt 0)

>>My footer is now an include element

D'OH - <slaps forehead>

That'll work and take about 10 second.

Sometimes it's the simple things that elude me :) Thanks pageone. I'm still gonna crack this one day but for now I'm going the include route.


 11:28 pm on Apr 11, 2002 (gmt 0)

My footer is now an include element

Hear, hear... for about half of my employer's site, my header and footer are both includes. Footer include at bottom of content div, and header at the very bottom of the HTML page (below content/footer div), in its own positioned div so it *appears* at the top of the page.


 11:34 pm on Apr 11, 2002 (gmt 0)

CSS + Includes = Total Site Management

I just don't know where I'd be today without includes. Oh, I know, I'd be doing find and replace routines to update static elements on over 30 sites!

I've been using includes since 1996 and now with the addition of CSS, I have total site management right at my fingertips.

I just built a page about Windows Keyboard Shortcuts and used CSS to build the keyboard buttons, its awesome. If you want to see, just sticky me and I'll send you the address!


 11:41 pm on Apr 11, 2002 (gmt 0)

There is one other bit of advice I'd like to pass along. You should definitely plan your CSS in advance if you can. Since I'm still in learning mode, I've had to go back and add classes here and there to account for changes to block level elements, etc...

The last site that I built (last week), I was able to plan the CSS and it was a breeze to complete. I built my initial template page with all includes and then set up my style sheet. Added content to the template and started tweaking here and there to achieve the desired effect. Once I was happy, and the client approved it, I was able to move forward with the remaining pages at an alarming rate. I might have to lower my prices. Not! In fact, they just went up!


 12:29 am on Apr 12, 2002 (gmt 0)

CSS + Includes = Total Site Management

What I'm playing with just a little is blog-script-as-text-content-management. I have a feeling, if I can get those three elements (CSS, includes, blog CGI) working together smoothly, I may have the ultimate in content management going on...

But for now, my CSS (especially the finer points of positioning) is a bit of a trial-and-error affair yet... I think it's because I actually tend to sleep at night. ;)

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved