The position property can allow an element to break completely free of your page's flow. With the value absolute, the affected element no longer has an impact on the rest of your regular content. In fact, an absolutely positioned element can even cover up other elements because it is essentially hovering in the design space.
Like with relative positioning, if you incorporate directional properties, you can set the element's location. Absolute positioning differs from relative positioning in two main ways, though. Absolute positioned elements have no impact on a page's flow, so no space is reserved for them. And the setting for their location is based on the sides of their container, which is often the web page itself. Using left, top, right, or bottom, you can set a distance value to determine how far your element is from the corresponding edge of the web page. It should be noted that both positive and negative values can be used. The example below shows a div that is positioned 50 pixels from the top and 0 pixels from the right. Notice how the layout no longer leaves a space for the absolutely positioned div.
|
<div></div> |
<div></div> |
You may wonder, why don't we just set all of our HTML elements with absolute positioning so everything can go exactly where we want it? Well, that's the problem. Web designs are made to adjust elegantly to fit a number of different resolutions and screens. What would be exactly perfect for one user's device, may be horrible on another. Web designs need to maintain a level of flexibility, so we need to rely primarily on the normal web page flow. But absolute positioning is still more than useful in creating a variety of layout possibilities.
