Absolute Positioning


The simplest form of absolute positioning is when the elements to position are positioned relative to the initial containing block, i.e., the containing block of the root element. When absolutely positioned elements are descendants of other positioned elements, things become more complicated.

There are two major ways in which absolute positioning can be used. One is to have a few small absolutely positioned elements in an otherwise normal document; for example, to put a logo in a corner. The other way is to create "areas" for parts of the document, much like the last example for fixed positioning in the previous section. The difference is that the size of the window isn't taken into account. Although most browsers will use the width of the window for the width of the initial containing block, the height of the initial containing block is unspecified.

The method to position an absolutely positioned element is the same as for fixed elements: Use either top or bottom to determine the vertical position relative to the containing block, and either the left or right properties for the horizontal position. If the element is not a replaced element, you should normally also set the width property, although the value auto for width has a special meaning that may be useful in certain cases (see the following section). Instead of setting width, you can also set both the left and right. Here is an example:

 IMG#stamp1 {    position: absolute;    top: 10px; right: 10px } 

This puts the image with ID "stamp 1" 10 pixels from the upper-right corner. Because it is an image, it has an intrinsic width, and you don't need to specify it (unless you want to resize it).

Here is another example. This creates a containing block out of a DIV and puts all the words inside it at random places. (You might want to use dice, or their electronic equivalent, to generate the percentages...) See Figure 9.6 for the result.

Figure 9.6. Six absolutely positioned words in a square.


 <STYLE>   #container { position: relative; border: solid;     width: 4cm; height: 4cm }   #w01 { position: absolute; top: 17%; left: 44% }   #w02 { position: absolute; top: 56%; left: 74% }   #w03 { position: absolute; top: 84%; left: 07% }   #w04 { position: absolute; top: 26%; left: 23% }   #w05 { position: absolute; top: 55%; left: 36% }   #w06 { position: absolute; top: 12%; left: 30% } </STYLE> ... <DIV ID=container>   <P><SPAN ID=w01>This</SPAN>     <SPAN ID=w02>line</SPAN>     <SPAN ID=w03>has</SPAN>     <SPAN ID=w04>exactly</SPAN>     <SPAN ID=w05>six</SPAN>     <SPAN ID=w06>words</SPAN> </DIV> 

Using Auto Values

The value auto has some special functions when set on the top or left properties of an absolutely positioned element. When both top and bottom are auto, the browser makes a guess as to where the element would have been if it had been a static element and sets top to the value that puts the element there. Similarly for left and right, if both of them are auto, the browser tries to make the value left such that the element is put almost where it would have been as a static element.

The values are only approximations because it is difficult to compute the values precisely without actually doing the layout. But, computing the layout twice takes too much time. However, the approximations are usually accurate within a few pixels, especially if the positioned element would have been a block element. If it would have been a static inline element, the chance that the values are more than a few pixels wrong is higher.

Using auto values on top and left allows us to write the example of Figure 9.3 in a different way. The trick employed here is to use auto on top and left to put the image where it would have been (after the word "for"), and then use negative margins to move it up and left:

 <STYLE>   SPAN.star { font-weight: bold }   IMG.star { position: absolute;    top: auto; left: auto; z-index: -1;    margin-top: -10px; margin-left: -10px } </STYLE> ... cleared for <SPAN ><IMG  src="/books/2/664/1/html/2/star.png" ALT="">grazing and cultivation</SPAN>, often by burning,... 

Whether this solution is "better" is a matter of taste.

Note that setting left and right to auto thus doesn't center an absolutely positioned element, like setting margin-left and margin-right to auto would do for a normal (static) block. But, there are various other ways to center an absolutely positioned block in its containing block. For example, you can calculate the correct value for left yourself, or you can set left and right to 0 and use the margins to center the element.

Let's also look at what happens when both width and right are auto. The situation is similar to what happens with static block elements when width and margin-right are auto: right is set to 0 and width takes the remaining space. This makes the absolutely positioned element extend from the position given by left all the way to the right edge of the containing block.

Everything we've said about left and right applies only in languages that are written left to right. If the absolutely (or fixed) positioned element is written right to left (the direction property is rtl), left and right switch roles: The magic auto value applies to right instead of left, and when both left and width are auto, left is set to 0.



Cascading Style Sheets(c) Designing for the Web
Cascading Style Sheets: Designing for the Web (3rd Edition)
ISBN: 0321193121
EAN: 2147483647
Year: 2003
Pages: 215

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net