Positioning Elements - Fixed - Absolute - Relative:
Positioning elements on a page with CSS is extremely flexible, and really can be a lot of fun to play with.
It's also a great way to add to my gray hair collection, but for a 'vintage' hand-coder such as I, it can be fun.
I'm particularly fond of overlapping elements. :)
Define element background colors to avoid show-through and maintain readability when stacking, scrolling and/or overlapping other elements on the page.
You can define parameters of elements to position them:
- Position: relative = moves an element relative to its normal position.
- Position: absolute = is positioned at the specified coordinates relative to its containing block.
- Position: fixed = is positioned at the specified coordinates relative to the browser window.
- Position: static = has the position the normal flow of the page gives it. (default)
Personally, I like the idea of a fixed-position header and/or navigation area to keep the Company/Site name and navigation in view at all times - much like the old "frames" layouts used to do, but without the old "trapped in frames" issues that went with it.
But I was less than delighted with the overall effect. So... I decided to try a fixed navigation column instead.
Better, but...if the page was viewed in a smaller browser window than the one I was using, the navigation column, and the page in general, became unuseable.
~ Not exactly the effect I was going for.
EXAMPLE - change this:
#rightcol {position: fixed; top: 50px; left: 800px;...
to this:
#rightcol {position: fixed; top: 5%; left: 68%;...
But no worries - changing some element parameters from pixels to percentages solved that. example-->
Now the navigation column is fixed and always on-screen, the page layout adjusts to fit the browsers screen-size, and everything remains readable and functional.
If you can scroll up and down on this page you'll see how that works.
The header and center elements on this page are defined in percentages and positions are either 'absolute' or 'relative'. However left navigation column has a 'fixed' position (also defined in percentages). This allows the column to remain in the same location in the browser window while the rest of the page scrolls as needed.
MUCH better. I like it, for now... What do you think?
--Abby
MENU:
Learning CSS:
Working with CSS
CSS Tools:
Software for Your CSS Websites