Forum Moderators: not2easy
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 :))
Relative positioning moves an element relative to its original position [w3schools.com]
There are 5 possible values for position: static, relative, absolute, fixed and inherit.
Static
means position generated as normal, just the way you would expect given the flow of the HTML. So you seldom state it explicitly.
Relative
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.
Absolute
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.
Fixed
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!
Inherit
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)
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! ;)
I have never fully understood relative positioning. Now maybe I have a fighting chance
:)
I've got 5 divs defines: header, mainbody, nav1, nav2 and footer. I'm trying to get them to layout like:
---Header---
Nav1 ¦ main body
Nav2 ¦ over here
---Footer---
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?
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].
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."
<edit> fixed up some pretty horrible grammer ;)</edit>
(edited by: oilman at 7:25 pm (utc) on April 11, 2002)
The more I dig, the more I find it can do.
(if wasn't for NN4.* I'd be digging deeper:))
Where's pageone? Can I get a witness? ;)
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!?
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! :)
<sigh>
Gonna go crack a beer and then have another run at it.
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!
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!
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.
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.
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!
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!
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. ;)
