Beginning CSS: Cascading Style Sheets for Web Design, 2nd ...

How It WorksChapter 11: PositioningIn Example 11-2, you reviewed two concepts used for positioning an element relatively: the first usingan element as a point of reference for positioning absolutely positioned elements, and the second, usingthe four offset properties to adjust the position of a relatively positioned element.To create a point-of-reference, you made a element, with an id name of relative, which had oneabsolutely positioned child element with an id name of bottom-right. The element with the idname bottom-right is given an absolute position, and the declarations bottom: 5px; and right: 5px;.As you see in the rendered output in Figure 11-8, this causes the element to be positioned to the bottomand right of the element with id name relative. If the position: relative; declaration were tobe removed from the element with id name relative, the bottom-right element would be positionedrelative to the viewport, as you saw in Figure 11-6.The second concept at play in Example 11-2 is using offset properties to adjust the position of a relativelypositioned element. The element with id name offset is given the position: relative; declaration,and the declarations top: 10px; and left: 10px;, which caused its position to be modified fromthe top by 10 pixels, from its original position, which is where it would have been if it were a staticallypositioned element, and to the left 10 pixels. This causes it to overlap its parent element. If theseproperties were not present, you would not see any of the parent element’s yellow background,since the element would have completely blocked it out.In the next section, I continue the concept of positioning with fixed positioning, which is similar to absolutepositioning, in that the element leaves the normal flow of the document, but unlike absolute positioning,the context of a fixed positioned element cannot be altered by nesting the element in a relativelypositioned element or another absolutely positioned element. Fixed position elements are always positionedrelative to the browser’s viewport, and remain in that position, even if the document is scrolled.Fixed PositioningFixed positioning is used to make an element remain in the same fixed position, even if the document isbeing scrolled. Alas, IE 6 does not support fixed positioning, so the example that follows will not workin IE 6. All is not lost however; there is a well-known workaround for IE 6’s lack of support for fixedpositioning, which is covered in the next section.Elements with a fixed position are always positioned relative to the viewport, regardless of whether it iscontained in an element with relative or absolute positioning applied. An example of fixed positioningappears in Figure 11-9.389