The combination of technologies you'll be working with in this tutorial will provide you with the basis for what you need to know about creating great CSS-based layouts, instead of the table-based. Fortunately, contemporary browsers have enough CSS supportand we have enough knowledge of workaroundsto apply these techniques to create great-looking pages.
Positioning refers to the scheme in CSS that enables you to use elements to create boxes and move them around in relation to the document and browser.
Float refers to a CSS technique that places an element to the right or left.
A z-index serves as a means to place element boxes along the z-axis. As the x- and y-axes, with x being horizontal and y being vertical. The z-axis provides the third dimension.
If you've been having a good time adding color, backgrounds, text styles, and margins to your pages, the fun has just begun. You'll be expanding your knowledge (which, at this point in the book should be quite sophisticated) to include the most significant aspects of CSS to be put to use in the past few years.
The combination of technologies you'll be working with in this tutorial will provide you with the basis for what you need to know about creating great CSS-based layouts, instead of the table-based ones discussed so often in this book. Fortunately, contemporary browsers have enough CSS supportand we have enough knowledge of workaroundsto apply these techniques to create great-looking pages.
Positioning refers to the scheme in CSS that enables you to use elements to create boxes and move them around in relation to the document and browser. You'll learn what these schemes are and how to begin applying them.
Float refers to a CSS technique that places an element to the right or left. The text in the document can then flow around that element. This is likely to be most familiar to you in the context of images. You can float an image to the right, and the text will flow around the image. Add a little padding, and you've got a great look.
The use of floating has expanded to include floating div elements, allowing for the use of floated boxes for navigation or, even more adventuresome, the creation of multiple columns that can be used with or without positioning in the design of various layouts.
A z-index serves as a means to place element boxes along the z-axis. So far, I've discussed only the x- and y-axes, with x being horizontal and y being vertical. The z-axis provides the third dimension.
Think of it this way: Hold up a deck of cards in front of you. The order in which the cards appear from the closest one to you to the farthest one away is a good way to think of the z-index. Using it, you can literally stack items on top of one another and offset them. This is somewhat useful in layouts and to create effects, but the use of the z-index usually comes into play when combined with JavaScript. It's an interesting aspect of CSS, so you'll get to play with it a bit here, too. Okay, thenon with the show!
By now, you know I'm just a wee bit interested in details. I feel it's very important that you learn the why as well as the how of things. So before I show you how to position elements, I want to go over some terminology and concepts important when working with positioning. Surely you're itching to start positioning elements and working with layouts, but bear with me. I assure you, there is method to my madness.
First off, it's important to remember that CSS positioning is a part of CSS, not something separate from it. Many people do refer to positioning as a separate concept, calling it CSS-P or other terms, but it's not a separate part of CSS.
In fact, positioning is really at the heart of CSSit's the piece that gives you ultimate control over the visual results of a page. The separation is a false one, which grew mainly out of the fact that positioning wasn't well supported and, thus, was mostly unusable until the past few years.
We're past that now, fortunately, and can begin to look at positioning in earnest. Are there flaws still within browsers? You bet there are, and I'll be discussing some of them in this tutorial and the next one.
To best prepare you to quickly grasp what some have spent years trying to clarify, I'll be using some terms to describe these positions and what they mean. The biggest part of the hurdle for many people who want to use CSS as a means of laying out pages is that the terminology is sometimes confusing, misleading, or downright unclear.
The CSS positioning scheme allows for four types of positioning, as follows:
Absolute
Relative
Static
Fixed
Positioning can make use of the offsets top, bottom, left, and right to position the box with specific values.
You'll learn the details of how each of these works as you go through the tutorial. But first, here's a bit about normal flow, containing blocks, and the browser viewport. It's a little dry, I suppose, but it's necessary to discuss nonetheless.
The term normal flow refers to the normal behavior of the browser. As you've surely noticed, everything defaults to the left of the browser unless otherwise modified by HTML or CSS. Consider Example 12-1.
Example 12-1. Unstyled content to help visualize normal flow in a browser
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>working with style</title>
</head>
<body>
<h1>The Black Cat</h1>
<h2>By Edgar Allen Poe</h2>
<p>I married early, and was <a href="http://www.poemuseum.org/">happy to find</a> in my
wife a disposition not uncongenial with my own. Observing my partiality for domestic pets,
she lost no opportunity of procuring those of the most agreeable kind. We had birds, gold
fish, a fine dog, rabbits, a small monkey, and a cat.</p>
<p>This latter was a <a href="http://www.poemuseum.org/">remarkably</a> large and
beautiful animal, entirely black, and sagacious to an astonishing degree. In speaking of
his intelligence, my wife, who at heart was not a little tinctured with superstition, made
frequent allusion to the ancient popular notion, which regarded all black cats as witches
in disguise. Not that she was ever serious upon this point - and I mention the matter at
all for no better reason than that it happens, just now, to be remembered.</p>
</body>
</html>
Because you already have an understanding of the box model, you now can visualize how each block element (the headers and paragraphs) are stacked on top of one another and flow normally to the left.
The inline elements (the links) go with the flow. If you resized the browser, they would simply reflow to their new position without breaking the line.
Figure 12-1 shows how the document appears in a browser window, and Figure 12-2 shows that browser upon resizing. You'll see how the text adjusts to the available space, always flowing to the left.
Figure 12-1. Unstyled document in the normal flow.
Figure 12-2. Resizing the browser reflows the text to the left.
After looking at these examples, try it out: Open a simple document with no tables or CSS positioning, and size and resize your browser. What you're observing is the normal flow of elements within that browser.
Another important concept when working with CSS positioning is the containing block. A containing block is any parent block box to the element you're trying to position. Consider Example 12-2.
Example 12-2. Understanding containing blocks
<div id="content"> <h1>The Black Cat</h1> <h2>By Edgar Allen Poe</h2> <p>I married early, and was <a href="http://www.poemuseum.org/">happy to find</a> in my
As you see, I've placed all the content into a div element, which I've given an id of content (how's that for brilliant?) All the blocks within the content div are now contained by the div.
Suppose you went a step further and placed a container around the content:
<div id="main"> <div id="content"> ... </div> </div>
The content div is now contained by the main div, which becomes the content div's containing box.
That's pretty simple so far, I think. But if you're having trouble visualizing this, think about those lacquered Chinese boxes that come nested one inside the other. The largest box contains the middle box, which contains the small box. So, the small box's containing block is the middle box, whose containing box is the large box.
It's important to understand this concept because when you begin to use positioning, the containing block of an element can have a lot to do with how the element or elements it contains are actually positioned.
Step back for a moment to Example 12-1. There's no obvious containing block, is there? Will you be surprised if I tell you that there's still a containing block? Here's how it works: If there is no specified containing block, the containing block is the root element. We know that the root element is html, so that's the containing block.
QUANTUM LEAP: BROWSER DEFAULTS
Why does it matter that html is the containing block when no other is specified? In the sense of positioning, it matters because there are browser default styles for many elements, including html. I discussed this a bit in tutorial 7, "Using CSS." Each browser has a default style sheet so that if you do not apply styles, some visual styling will still occur. This is why, without style, headers, paragraphs, links, and more still have a font, font size, and weight. When working with positioning, it's going to look as if certain positioned boxes are positioned in relation to the browser edges (also known as chrome). In reality, the positioning of certain uncontained blocks is due to the default styles given to the html element.
For Figure 12-3, I simply styled the html element to have a 2-pixel border. You can see how different browsers interpret the html element.
Figure 12-3. From left to right: Firefox, Opera, and Internet Explorer 6.0note how Firefox and Opera interpret the html element and its styled borders within the document, whereas, in IE, the bottom and left portions of the element include portions of the browser such as the scrollbar.
IE's implementation is quirky, although not incorrect, because the specs are not very clear regarding how browsers should implement containing blocks. That's all the more reason to understand the why of positioning as well as the application of positioning.
The browser viewport is the window in the browser through which the document content is viewed. This is a fairly simple concept, but, again, it's a distinct one from containing blocks.
In positioning, in some cases, element boxes are positioned in relation to the viewport and not normal flow or containing blocks. So understanding the viewport is important (see Figure 12-4).
Figure 12-4. The Firefox browser with sidebar, menus, and status barthe viewport is only the window through which you're seeing the document.
NOTE
It is considered conventional browser behavior to include a scrollbar in the viewport when the content is longer or wider than the available viewport space. Browsers behave differently in this regard, partly because the guidelines are not very specific when it comes to how browsers should ideally behave. As a result, there will be inconsistencies in the way users experience your designs, no matter what techniques you use.
Okay, enough terminology. It's time to have some fun and actually put positioning to work! Absolute positioning positions an element box in relation to its containing block. When you position something absolutely, you take it completely out of the normal flow. In easy terms, this means that any box you position will always be positioned to either its explicit container or to the html root element (not the viewport), no matter what other content might be on the page.
Oh, good! Now you get to see why I had to spend time up front to detail the terminology. In Example 12-3, I've placed a header and a paragraph into a containing block, and then positioned the block to an offset of 100 pixels from the left and 50 pixels from the top.
Example 12-3. Absolutely positioning a block to the root element
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>working with style</title>
<style type="text/css">
#content {
position: absolute;
left: 100px;
top: 50px;
border: 1px solid red;
}
</style>
</head>
<body>
<div id="content">
<h1>The Black Cat</h1>
<p>I married early, and was <a href="http://www.poemuseum.org/">happy to find</a> in my
wife a disposition not uncongenial with my own. Observing my partiality for domestic pets,
she lost no opportunity of procuring those of the most agreeable kind. We had birds, gold
fish, a fine dog, rabbits, a small monkey, and a cat.</p>
</div>
</body>
</html>
Because there's no other containing block explicitly defined, the block will be positioned to the root element of html. I placed a screen shot that excluded any browser chrome in Photoshop so you can see how the box is now positioned absolutely to its containing block (see Figure 12-5). Figure 12-6 shows the same box in relation to other page elements.
Figure 12-5. Absolutely positioning the content div.
Figure 12-6. The absolutely positioned box with an explicit widthcontent flows within the box, which remains positioned despite other document elements, making it crystal clear what is meant by an absolute box being completely removed from the normal flow.
Returning to the earlier example in which I described a containing block for the content block, you can move on to see how an absolutely positioned block is positioned only in relation to its containing block (see Example 12-4).
Example 12-4. Absolutely positioning a block to its containing block
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>working with style</title>
<style type="text/css">
#main {
position: absolute;
left: 50px;
top: 20px;
border: 1px solid green;
}
#content {
position: absolute;
left: 100px;
top: 50px;
width: 300px;
border: 1px solid red;
background-color: #ccc;
}
ul, li, a {
list-style-type: none;
display: inline;
text-decoration: none;
}
</style>
</head>
<body>
<div id="main">
<div id="nav">
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="products.html">Products</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<div id="content">
<h1>The Black Cat</h1>
<p>I married early, and was <a href="http://www.poemuseum.org/">happy to find</a> in my
wife a disposition not uncongenial with my own. Observing my partiality for domestic pets,
she lost no opportunity of procuring those of the most agreeable kind. We had birds, gold
fish, a fine dog, rabbits, a small monkey, and a cat.</p>
</div>
</div>
</body>
</html>
Here, the containing block main is absolutely positioned 50 pixels from the left and 20 pixels from the top. The navigation block isn't positioned at all, but it is contained within the main and, therefore, flows normally within its block. I've provided some minimal style so you can see this coming together. Finally, the content div is absolutely positioned. Watch what happens (see Figure 12-7).
Figure 12-7. Absolutely positioning the content div to its containing block.
Note the two circles in the image. The first one highlights the starting point of the containing block, main. The second highlights the starting point of the content block. Notice how the content block is positioned to the containing block: 100 pixels in from the left of the containing block, 50 pixels from the top of the containing block.
The box now sits 150 pixels from the left and 70 pixels from the top. The reason is clearly because it's being positioned in relation to the position of its containing block, not the html element or the browser viewport.
NOTE
A containing block does not have to be positioned absolutely. The positioning scheme as described remains in effect no matter what the position type is: An absolutely positioned box always is positioned to its containing block, and it is always removed from the normal flow, with no exceptions.
As mentioned, the terminology used in CSS positioning is a bit vague. Relative positioning is often confusing at first because it begs the question: Relative to what? Most people automaticallyand quite logicallythink that the position would be relative to another element.
But it's not (you knew that was coming). Relatively positioned boxes are positioned to the normal flow. This means that they are not removed from the normal flow the way an absolutely positioned box is. Here, I've removed all margins using the universal selector (*); this is to get rid of all default whitespace so you can see exactly how the relative positioning is being measured (see Example 12-5).
Example 12-5. Relative positioning
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>working with style</title>
<style type="text/css">
* {margin: 0;}
#content {
position: relative;
left: 45px;
top: 10px;
width: 400px;
border: 1px solid red;
}
</style>
</head>
<body>
<h1>The Black Cat</h1>
<p>I married early, and was <a href="http://www.poemuseum.org/">happy to find</a> in my
wife a disposition not uncongenial with my own. Observing my partiality for domestic pets,
she lost no opportunity of procuring those of the most agreeable kind. We had birds, gold
fish, a fine dog, rabbits, a small monkey, and a cat.</p>
<div id="content">
<p>This latter was a <a href="http://www.poemuseum.org/">remarkably</a> large and
beautiful animal, entirely black, and sagacious to an astonishing degree. In speaking of
his intelligence, my wife, who at heart was not a little tinctured with superstition, made
frequent allusion to the ancient popular notion, which regarded all black cats as witches
in disguise. Not that she was ever serious upon this point - and I mention the matter at
all for no better reason than that it happens, just now, to be remembered.</p>
</div>
<p>Pluto - this was the cat's name - was my <a href="http://www.poemuseum.org/">favorite<
/a> pet and playmate. I alone fed him, and he attended me wherever I went about the house.
It was even with difficulty that I could prevent him from following me through the streets
.</p>
</body>
</html>
Figure 12-8 shows how the content div is now positioned relative to the normal flow of the document, not any other boxes.
Figure 12-8. A relative positioned boxnote that the offsets relate to the normal flow, not any other element.
So, the box is offset 10 pixels from the earlier element box and 45 pixels to the left of the flowexactly the same place where the text begins because it's in the normal flow, too. You see that the flow is uninterrupted by the positioning; the ensuing content flows as it should both before and after the relatively positioned box.
NOTE
Relative positioning is used when the normal flow shouldn't be broken. Absolute positioning is best used for items that have to be positioned very specifically. Often the two are combined, such as having a relatively positioned div with an absolutely positioned div contained within it, or vice versa. You'll see more of this in action in tutorial 13, "CSS Layouts."
Fixed positioning is a brilliant piece of CSS. Now you know that if I'm starting off a section like that, I'm giving you the good news first to soften the blow. Because as brilliant as fixed positioning is, it's not supported in Internet Explorer and, as such, can be used only for Mozilla, Opera, Safari, and other browsers that do support it. Phooey!
Fixed positioning enables you to fix a box anywhere on the page. Unlike absolute positioning, fixed elements are positioned in relation to the viewport (you knew that just had to be somewhere in this tutorial). Look at Example 12-6.
Example 12-6. Fixed positioning
<style type="text/css">
#nav {
position: fixed;
left: 0px;
top: 0px;
background: #ccc;
width: 100%;
}
ul, li, a {
list-style-type: none;
display: inline;
text-decoration: none;
padding-left: 3px;
padding-right: 3px;
}
</style>
So check out what I just did. By positioning the nav div to 0 left and 0 top, adding a gray background, and setting my width to 100%, I oh-so-cleverly made my navigation look pretty darned close to a standard menu, just as you'd find in the browser itself (see Figure 12-9).
Figure 12-9. A fixed-position navigation bar.
NOTE
Although IE 6.0 doesn't support the fixed scheme, it doesn't entirely disallow you from using it. You'll get the positioned box, but it will scroll off along with the rest of the content instead of remaining fixed in place.
In browsers that support fixed positioning, this menu will remain fixed no matter what else moves. So, if I scroll the content, it will disappear under the menu (see Figure 12-10).
Figure 12-10. The content scrolls beneath the fixed-position nav.
You can see why I'm frustrated by IE's lack of support for fixed positioningwhat a useful positioning scheme.
NOTE
Static positioning is the fourth positioning type. It simply positions a box in the normal flow and, because of that, is rarely used. You can think of using static positioning as similar to using the text-align: left; property and value. It's the default behavior, so it is used only to override an earlier rule. You'll rarely see static position in use as a result.
As mentioned in the tutorial's introduction, floating is not a positioning scheme. It gets confused with positioning sometimes because it can be used alone or with positioned boxes to create layouts.
The reason floating was introduced in CSS at all wasn't for layout, per se. The intent was to be able to float elements, particularly images, and have content flow around the image (see Example 12-7).
Example 12-7. Floating an image
<style type="text/css">
img {
float: right;
padding: 15px;
}
</style>
Figure 12-11 shows the results. I've added styles to spice up the look.
Figure 12-11. Floating an image allows text to flow around the image, resulting in a sophisticated look.
Just as you can float an img element, you can float any element. So, if your navigation is in a div and you want to float that element, you can do so (see Example 12-8).
Example 12-8. Floating a div
#nav {
float: right;
border: 1px solid red;
padding-right: 20px;
padding-top: 10px;
margin-left: 10px;
}
Figure 12-12 shows how the nav div and the elements it contains are now floated to the right, just as the image would be. By doing this, you've actually created a floating navigation system that you can style to your heart's content.
Figure 12-12. Floating a boxthe nav div is now floated, just as an image would be.
You can now quite easily imagine how floats can be used for laying out portions of a document.
Clearing a float means clearing away all subsequent content so that the element is still floated but is not surrounded by the other elements. The clear property takes a value of left, right, or both. By adding the clear: right; property to the content division, the floating navigation remains in place, but the text is cleared (see Figure 12-13).
Figure 12-13. Clearing a float allows the floated element to remain in place, while the subsequent content is cleared from around it.
I created two floating boxes in Example 12-9.
Example 12-9. Styling two floating boxes, one to the left and one to the right
#nav {float: right; border: 1px solid red; padding-right: 20px; padding-top: 10px;
margin-left: 10px;}
#nav2 {float: left; border: 1px solid red; padding-right: 20px; padding-top: 10px;
margin-right: 10px;}
Figure 12-14 shows what happens when I don't use a clear property for the content.
Figure 12-14. Without a clear, the content flows normally with the floated boxes.
I added a clear: both to the content style (see Figure 12-15).
Figure 12-15. Clearing both the left and right floated boxes.
Interesting, eh? You can see the beginnings of columns. You'll be working with floated columns in tutorial 13.
The z-index creates the dimensional axis upon which you can "stack" and overlap items. This comes in handy in positioning because you can use it to determine which boxes come to the foreground and which ones will flow behind upon browser resize. Other uses for the z-index relate mostly to DHTML, in which element boxes are scripted for dynamic purposes such as when creating animations or games.
Example 12-10 shows three boxes, each absolutely positioned to overlap one another and styled in such a way that you can visualize the stacking order.
Example 12-10. Z-index with positioned boxes
#box1 {
position: absolute;
top: 10px;
left: 10px;
background: #000;
width: 300px;
height: 200px;
z-index: 1;
}
#box2 {
position: absolute;
top: 20px;
left: 20px;
background: #999;
width: 300px;
height: 200px;
z-index: 2;
}
#box3 {
position: absolute;
top: 30px;
left: 30px;
background: #ccc;
width: 300px;
height: 200px;
z-index: 3;
}
You'll note that the higher the number is, the "closer" the box appears in the stack. So, a box with a z-index of 3 appears to be the closest to you in the stack (see Figure 12-16).
Figure 12-16. Z-index and stacking orderthe higher the integer value is, the closer to you in the stack the element appears.
If it's taking a bit of time to get the concepts in this tutorial down, please don't fret. These are some of the most complicated, confusing, and challenging aspects of CSS.
There's really no way to comfort you if you are having a bit of trouble, other than to say that you must give it time. No one learns this stuff overnightand if you have, well, you're ready for prime time!
It takes constant practice and play to really get the hang of working with positioning; it's simply part of the nature of the CSS beast.
Of course, the rewards are richly worth it. As you'll find out in the next tutorial, everything in this tutorial will come togetherat least, conceptuallywhen you begin to study layouts. After that, you'll want to practice, practice, practice to really get your skills as finely honed as a pro's.
discuss this topic to forum
