As we went over on the previous page, absolute positioning lets an element sit wherever we want it to, based on the edges of the web page itself. However, this isn't always a convenient way to measure things. Depending on how wide or tall a browser is stretched, it can drastically change the location of content on the page as text, images and divs redistribute to properly fit the space. So an absolutely positioned element will stay right where we tell it to, but it may end up looking wrong as everything else moves around.
|
Three absolute position divs in two different sized layouts. |
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sagittis orci convallis metus ultrices, vel sodales est pretium. Quisque leo lacus, pellentesque pellentesque auctor ac, hendrerit a felis. Nulla tempor dui nisl, sed ultricies purus pharetra placerat. Proin varius pretium sodales. Phasellus consequat efficitur luctus. Nullam est orci, elementum a volutpat pharetra, maximus eu purus. Praesent tellus sem, consequat commodo vestibulum ut, convallis vitae felis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris cursus, sem at fringilla lacinia, turpis odio laoreet diam, at tincidunt nisi velit sed enim. |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sagittis orci convallis metus ultrices, vel sodales est pretium. Quisque leo lacus, pellentesque pellentesque auctor ac, hendrerit a felis. Nulla tempor dui nisl, sed ultricies purus pharetra placerat. Proin varius pretium sodales. Phasellus consequat efficitur luctus. Nullam est orci, elementum a volutpat pharetra, maximus eu purus. Praesent tellus sem, consequat commodo vestibulum ut, convallis vitae felis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris cursus, sem at fringilla lacinia, turpis odio laoreet diam, at tincidunt nisi velit sed enim. |
This is where relative positioning comes back in. Given that absolute positioning measurements are based on a container (normally the edges of the web page), we can change the targeted container for better precision. When you add the "position:relative" property to a container, any elements inside are now position in relation to it. So if we have elements inside with absolute positioning, their location measurements are now based on the edges of the "position:relative" container rather than the entire page.
These constraints will make it easier to arrange absolutely positioned elements in a smaller space, but that container will also relocate with changes in the flow of the page, keeping things in better order.
|
Three absolute position divs inside a position:relative container. |
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sagittis orci convallis metus ultrices, vel sodales est pretium. Quisque leo lacus, pellentesque pellentesque auctor ac, hendrerit a felis. Nulla tempor dui nisl, sed ultricies purus pharetra placerat. Proin varius pretium sodales. Phasellus consequat efficitur luctus. Nullam est orci, elementum a volutpat pharetra, maximus eu purus. Praesent tellus sem, consequat commodo vestibulum ut, convallis vitae felis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris cursus, sem at fringilla lacinia, turpis odio laoreet diam, at tincidunt nisi velit sed enim. |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sagittis orci convallis metus ultrices, vel sodales est pretium. Quisque leo lacus, pellentesque pellentesque auctor ac, hendrerit a felis. Nulla tempor dui nisl, sed ultricies purus pharetra placerat. Proin varius pretium sodales. Phasellus consequat efficitur luctus. Nullam est orci, elementum a volutpat pharetra, maximus eu purus. Praesent tellus sem, consequat commodo vestibulum ut, convallis vitae felis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris cursus, sem at fringilla lacinia, turpis odio laoreet diam, at tincidunt nisi velit sed enim. |
