This example page shows all the four types of positioning that are available in
CSS 2.1:
static (main content)
relative (drop cap in block quotation)
fixed (header, footer, left-hand menu)
All of the CSS is contained within the page, so all you have to do to see how it's done is to select "View source" in your browser.
It will only work fully in CSS2-compliant browsers like recent versions of Opera, Firefox, Safari and Internet Explorer 7. Users with Internet Explorer 5.5 or 6 for Windows will see a slightly degraded version, because those browsers do not support fixed positioning. The rendering in Internet Explorer 5 for Mac is quite
bad (but fixable).
Fixed and Absolute Positioning
Both the header (fake logo and page heading) and the footer (copyright statement) have fixed positioning, at the top and bottom of the screen, respectively. If you scroll down the page you will see that the content and the sidebar will scroll, but the header and footer will stay in place - unless you use
Internet Explorer 6 or older.
The fake navigation menu on the left also has a fixed position, so it will remain in place when the page is scrolled. The sidebar to the right, on the other hand, is absolutely positioned and will scroll along with the content.
In older Internet Explorer versions the menu is positioned absolutely (via a conditional comment). It will move along as you scroll, but that's the only difference: graceful degradation.
Relative Positioning
In order to show how relative positioning works, the block quotation below uses a floating and relatively positioned drop cap. By floating it to the left it we create a drop cap and by using relative positioning we can nudge it upward and to the left and create a cut-out effect.
The containing block in which the root element lives is chosen by the user agent. (It could be related to the viewport.) This containing block is called the initial containing block.
Note, that this example doesn't work in IE5/Mac.
Containing Blocks
The most important thing when it comes to absolute positioning is to know your containing blocks. In this page the sidebar doesn't have a positioned ancestor, so its containing block is the "initial containing block", i.e., the viewport.
The menu on the left is positioned, so it becomes the containing block for any absolutely positioned children. The links in the menu contains absolutely positioned spans, which are normally hidden. When you hover over a link (or tab to it) the description in the span appears below the menu. (This doesn't work in Internet Explorer 5/6.)
If you look at the page source you will see that I have set z-index:1 for the header. Why?
The header, sidebar, menu and footer are all positioned, and they occur in this order in the markup. They have the same containing block (the viewport) which means they belong to the same stacking context.
Without the z-index setting for the header, the sidebar will slide on top of the header as you scroll down the page. This is because the sidebar appears after the header in the markup and they are both in the same stacking context.
By increasing the z-index for the header I can put it in front of the sidebar, so that the latter will slide underneath the former as you scroll. Note that I don't have to use a ridiculously high value like z-index:100; it just needs to be slightly higher than zero.
I could also have achieved a similar effect in this case by setting z-index:-1 for the sidebar.
Accessibility
Looking at the CSS rules in the page source, you will see that all important positions and dimensions are set with em as the unit. This means the layout will not fall apart if you increase or decrease the text size using your browser's built-in functions. Actually, it will fall apart eventually, when there isn't enough room for the centre column, but it should survive enough text enlargements to be accessible for the majority.
Some of the techniques demonstrated on this page are not very usable in the real world. Internet Explorer 5.x and 6 do not support fixed positioning, which makes that useless for public web sites.
There are also some usability issues: because of the lack of support for fixed positioning in the hitherto most popular browser, we are not used to "sticky" headers, footers and menus. Most users probably expect everything on the page to move upward when they scroll down.
Still, for specialised applications (like company intranets) where you know that everyone will have a modern browser, it could be feasible.
The main purpose of the page is to show how the concepts of positioning in CSS 2.1 works, anyway.
Oh, and the markup is valid HTML 4.01 Strict and the styling is valid CSS 2.1 (with four warnings that can safely be ignored).
About Author :
authorUrl : http://www.digital-web.com/extras/positioning_101/css_positioning_example.php
To read more articles on: usability, applications, specialized, CSS rules, containing block, CSS2-compliant
View more blogs here : http://www.technoinfonet.com/Blogs
No comments:
Post a Comment