Proficient in CSS advanced Web standard solutions: relative positioning and absolute positioning

 

2.2.2 relative positioning

Relative positioning is a very easy-to-understand concept. If an element is relatively located, it appears at its location. Then, you can set the vertical or horizontal position to move the element "relative to" its start point. If you set top to 20 pixels, the box will show 20 pixels at the top of the original position. If left is set to 20 pixels, a 20 pixel space is created on the left of the element, that is, the element is moved to the right (see Figure 2-10 ).

# Mybox {
Position relative;
Left: 20px;
Top: 20px;
}

Figure 2-10 relative positioning of Elements

When relative positioning is used, elements still occupy the original space no matter whether they are moved or not. Therefore, moving an element overwrites other boxes.

2.2.3 absolute positioning

Relative positioning is actually considered as part of the normal stream positioning model, because the position of an element is relative to its position in the normal stream. In contrast, absolute positioning makes the element's position irrelevant to the Document Stream, so it does not occupy space. The layout of other elements in a normal Document Stream is the same as that of an absolutely positioned element (see Figure 2-11 ).

Figure 2-11 absolute positioning of Elements

The position of the absolute positioning element is relative to the nearest located ancestor element. If an element does not have an ancestor element that has been located, its position is relative to the initial contained block. Depending on the user agent, the initial inclusion block may be a canvas or HTML element.

As with the relative positioning box, the absolute positioning box can be moved from its contained block up, down, left, right. This provides great flexibility. The element can be directly located anywhere on the page.

The main problem in positioning is to remember the meaning of each positioning. Relative positioning is the initial position of "relative" elements in the Document Stream, while absolute positioning is the "relative" Recent "already located ancestor element. If no already located ancestor element exists, it is the initial inclusion block.

Because the absolute positioning boxes are irrelevant to the Document Stream, they can overwrite other elements on the page. You can set the Z-index attribute to control the stacking order of these boxes. The higher the Z-index value, the higher the position of the box in the heap.

Relative to the most recently located ancestor element, the absolute positioning element allows us to achieve some very interesting results. For example, suppose you want to align a text section with the bottom right corner of a large box. You only need to perform relative positioning on the include box, and then perform absolute positioning on the paragraph relative to this box:

# Branding {
Width: 700px;
Height: 100px;
Position: relative;
}
# Branding. Tel {
Position: absolute;
Right: 10px;
Bottom: 10px;
Text-align: right;
}
<Div id = "branding">
<P class = "tel"> Tel: 0845 838 6163 </P>
</Div>

Relative to the relative positioning ancestor element, the box is absolutely positioned, which is well implemented in most modern browsers. However, there is a bug in IE 5.5 and IE 6 on Windows. If you try to set the absolute position of the box relative to the right or bottom of the relatively positioned box, make sure that the size of the box relative to the positioning has been set. If no, ie locates the box relative to the canvas. In Chapter 2, you can learn more about this bug and how to fix it. A simple solution is to set the width and height of the relatively positioned box to avoid this problem.

Absolute positioning is a useful tool for page layout, especially when relative positioning ancestor elements are used. It is entirely possible that only absolute positioning is used to create the entire design. To this end, these elements need to have a fixed size so that they can be located anywhere without overlap risks.

Because the absolute positioning elements are irrelevant to the Document Stream, they do not affect the boxes in the normal stream. If you expand the absolute positioning box (for example, by adding the font size), the surrounding box will not be located again. Therefore, any change in the size will lead to overlapping absolute positioning boxes, thus damaging the well-adjusted layout.

Fixed Positioning

Fixed positioning is a subcategory of absolute positioning. The difference is that the inclusion block of a fixed element is a viewport. This allows us to create floating elements that always appear in the same position in the window. An example of this situation can be seen on snook. Ca (see Figure 2-12 ). The Comment Form of a blog uses a fixed position, which keeps appearing at the same position on the screen during Page scrolling. This helps improve ease of use, and users do not have to scroll to the bottom of the page to make comments.

Figure 2-12 on snook. ca, the Comment area on the right side of the screen is fixed, so it always appears in the same position in the viewport

Unfortunately, ie 6 and earlier versions do not support fixed positioning. To solve this problem, Jonathan Snook uses JavaScript to reproduce this effect in IE.