Recipe 1.16. Using Relative Positioning

Problem

You want to place content based on its position in the document. In other words, the element's position is modified relative to its natural position as rendered by the browser.

Solution

Use the position property with the relative value in the style sheet. Also add top, left or both properties to indicate where to position an element.

Using the following CSS rule on the image, the image was able to move over the paragraph content in Figure 1-39:

.relative {  position: relative;   top: 100px;   left: 20px; }

Figure 1-39. Relative positioning places an element based on its location within the document's natural flow

Discussion

Unlike absolute positioning, the sample code doesn't start at the top and left edges of the window. Instead, it begins where p elements would be if left alone. The code tells the browser to position the paragraph 100 pixels down from the top and 20 pixels over from the left edge of the original paragraph's position instead of from the edge of the window. With absolute, the content is placed exactly where the properties tell it to go from the edges in the current box.

Problem

Solution

Figure 1-39. Relative positioning places an element based on its location within the document's natural flow

Discussion

See Also