CSS Positioning

If using float to control how elements are laid out doesn't provide the measure of control you're looking for, you can use the CSS positioning attributes. To position elements yourself, you first have to choose a positioning scheme with the position property. There are four positioning schemes, three of which you'll actually use. The four are static, relative, absolute, and fixed.

The static scheme is the default. Elements flow down the page from left to right and top to bottom, unless you use the float property to change things up. The relative scheme positions the element relative to the element that precedes it. You can alter the page flow to a certain degree, but the elements will still be interdependent. The absolute and fixed schemes enable you to position elements in any location you want on the page. The fixed scheme is not well supported, so if you want to control where items appear yourself you should use absolute.

Once you've picked a positioning scheme, you can set the position for elements. There are four positioning properties: top, left, bottom, and right. The values for these properties are specified as the distance of the named side from the side of the enclosing block. Here's an example:

.thing {     position: relative;     left: 50px;     top: 50px; }

In this case, elements in the thing class will be shifted 50 pixels down and 50 pixels to the left from the element that precede them in the page layout. If I changed position to absolute, the element would appear 50 pixels from the top-left corner of the page's body.

Generally, when you're positioning elements, you pick a corner and specify where the element should be located. In other words, there's never a need to set more than two of the four positioning properties. If you set more than two, you could run into problems with how the browser renders the page because you're specifying not only where the element should be located but also the size of the element. It's much safer to use the sizing properties to size your elements and then specify the position of one corner of your element if you want to indicate where it should go on the page.

Relative Positioning

Let's look at a page that uses relative positioning. This page will illustrate both how relative positioning works and some of the problems with it. A screenshot of the page listed in the following code appears in Figure 9.15.

Input

<html> <head>   <title>CSS Example</title>   <style type="text/css"> .two {   border: 3px solid blue;   padding: 10px;   margin: 10px;   background-color: #ffc;   position: relative;   top: -46px;   left: 50px;   width: 33%; }   </style> </head> <body> <p > The absence of romance in my history will, I fear, detract somewhat from its interest; but if it be judged useful by those inquirers who desire an exact knowledge of the past as an aid to the interpretation of the future, which in the course of human things must resemble if it does not reflect it, I shall be content. </p> <p > The absence of romance in my history will, I fear, detract somewhat from its interest; but if it be judged useful by those inquirers who desire an exact knowledge of the past as an aid to the interpretation of the future, which in the course of human things must resemble if it does not reflect it, I shall be content. In fine, I have written my work, not as an essay which is to win the applause of the moment, but as a possession for all time. </p> <p > The absence of romance in my history will, I fear, detract somewhat from its interest; but if it be judged useful by those inquirers who desire an exact knowledge of the past as an aid to the interpretation of the future, which in the course of human things must resemble if it does not reflect it, I shall be content. In fine, I have written my work, not as an essay which is to win the applause of the moment, but as a possession for all time. </p> </body> </html>

Output

Figure 9.15. A page that uses relative positioning for an element.

You can spot the problem right away on this pagethe relatively positioned element overlaps the paragraph above it. I used a negative value for the top property to move the element up 50 pixels, and also moved it to the left 50 pixels. The hole where the content would normally be positioned if I were using static positioning remains exactly the same as it would had I not moved the element, thus creating white space before the third paragraph. However, due to the positioning, the paragraph has been moved up so that it overlaps the one above it.

Another point to note is that boxes are normally transparent. I added a background color to the relatively positioned box to more clearly illustrate how my page works. If I remove the background-color property from class two, the page looks like the one in Figure 9.16.

Figure 9.16. Transparency of overlapping elements.

Needless to say, in this example, transparency is probably not the effect I'm looking for. However, taking advantage of this transparency can be a useful effect when you create text blocks that partially overlap images or other nontext boxes.

Absolute Positioning

Now let's look at absolute positioning. The source code for the page shown in Figure 9.17 contains four absolutely positioned elements.

Input

<html> <head>   <title>CSS Example</title>   <style type="text/css"> #topleft {   position: absolute;   top: 0px;   left: 0px; } #topright {   position: absolute;   top: 0px;   right: 0px; } #bottomleft {   position: absolute;   bottom: 0px;   left: 0px; } #bottomright {   position: absolute;   bottom: 0px;   right: 0px; } .box {   border: 3px solid red;   background-color: #ccf;   padding: 10px;   margin: 10px; }   </style> </head> <body> <div  > Top left corner. </div> <div  > Top right corner. </div> <div  > Bottom left corner. </div> <div  > Bottom right corner. </div> <p > The absence of romance in my history will, I fear, detract somewhat from its interest; but if it be judged useful by those inquirers who desire an exact knowledge of the past as an aid to the interpretation of the future, which in the course of human things must resemble if it does not reflect it, I shall be content. </p> <p > The absence of romance in my history will, I fear, detract somewhat from its interest; but if it be judged useful by those inquirers who desire an exact knowledge of the past as an aid to the interpretation of the future, which in the course of human things must resemble if it does not reflect it, I shall be content. In fine, I have written my work, not as an essay which is to win the applause of the moment, but as a possession for all time. </p> </body> </html>

Output

Figure 9.17. A page that uses absolute positioning.

Aside from the fact that there are now four absolutely positioned <div>s on the page exactly where I indicated they should be placed, a couple of other things should stand out here. The first item to notice is that when you absolutely position elements, there's no placeholder for them in the normal flow of the page. My four <div>s are defined right at the top, and yet the first paragraph of the text starts at the beginning of the page body. Unlike relative positioning, absolute positioning completely removes an element from the regular page layout. The second interesting fact is that absolutely positioned elements overlap the existing content without any regard for it. If I wanted the text in the paragraphs to flow around the positioned elements, I would have had to use float rather than position.

Not only can I use any unit of measurement when positioning elements, I can also use negative numbers if I choose. You already saw how I applied a negative value to the top of the relatively positioned element to move it up some; I can do the same thing with these absolutely positioned elements. The result of changing the rule for the topleft class in the earlier example to

Input

#topleft {   position: absolute;   top: -30px;   left: -30px; }

is that it actually pulls the element partially off of the page, where it is inaccessible even using the scroll bars, as shown in Figure 9.18.

Output

Figure 9.18. Use of negative absolute positioning.

Controlling Stacking

If overlap isn't the effect you're looking for, relative and absolute positioning probably aren't for you. However, there is a way to control overlap as well. The z-index property defines stacking order for a page. By default, elements that appear in the same layer of a document are stacked sequentially. In other words, an element that appears after another will generally be stacked above it.

By assigning z-index values to elements, though, you can put elements in specific stacking layers. If all elements appear in stacking layer 0 by default, any element in stacking layer 1 (z-index: 1) will appear above all elements in layer 0. The catch here is that z-index can be applied only to elements that are placed using absolute or relative positioning. Elements that are placed using static positioning always appear below relatively or absolutely positioned elements. The stacking layers below 0 are considered beneath the body element, and so they don't show up at all.

Tip

If you want to have an element positioned as though it were part of the static positioning scheme but you want to control its stacking layer, assign it the relative positioning scheme and don't specify a position. It will appear on the page normally but you will be able to apply a z-index to it.

Let's look at another page. This one contains two paragraphs, both part of the same (default) stacking layer. As you can see in Figure 9.19, the second overlaps the first.

Input

<html> <head>   <title>CSS Example</title>   <style type="text/css"> .one {   position: relative;   width: 50%;   padding: 15px;   background-color: #ffc; } .two {   position: absolute;   top: 15%;   left: 15%;   padding: 15px;   width: 50%;   background-color: #060;   color: #fff; }   </style> </head> <body> <p > The absence of romance in my history will, I fear, detract somewhat from its interest; but if it be judged useful by those inquirers who desire an exact knowledge of the past as an aid to the interpretation of the future, which in the course of human things must resemble if it does not reflect it, I shall be content. </p> <p > The absence of romance in my history will, I fear, detract somewhat from its interest; but if it be judged useful by those inquirers who desire an exact knowledge of the past as an aid to the interpretation of the future, which in the course of human things must resemble if it does not reflect it, I shall be content. In fine, I have written my work, not as an essay which is to win the applause of the moment, but as a possession for all time. </p> </body> </html>

Output

Figure 9.19. Two normally stacked elements.

So, how do I cause the first element to overlap the second? Because I've assigned the first element the relative positioning scheme (even though I haven't positioned it), I can assign it a z-index of 1 (or higher) to move it into a stacking layer above the second paragraph. The new style sheet for the page, which appears in Figure 9.20, is as follows:

Input

.one {   position: relative;   z-index: 1;   width: 50%;   padding: 15px;   background-color: #ffc; } .two {   position: absolute;   top: 15%;   left: 15%;   padding: 15px;   width: 50%;   background-color: #060;   color: #fff; }

Output

Figure 9.20. A page that uses `z-index` to control positioning.

Needless to say, using a combination of absolute and relative positioning, you can create very complex pages with many stacked layers.

Relative Positioning

Figure 9.15. A page that uses relative positioning for an element.

Figure 9.16. Transparency of overlapping elements.

Absolute Positioning

Figure 9.17. A page that uses absolute positioning.

Figure 9.18. Use of negative absolute positioning.

Controlling Stacking

Figure 9.19. Two normally stacked elements.

Figure 9.20. A page that uses z-index to control positioning.

Figure 9.20. A page that uses `z-index` to control positioning.