Demo Page: Relative Positioning

Layout sample using 'position: relative' and floats in the CSS.

Look in the head tag for CSS styles for this page, including positioning details.

'Position: relative:' combined with 'float:' and/or 'clear:' properties moves an element from its position in normal flow and offests it relative to where it would have been in normal flow, rather than the upper-left corner of the parent container, as in absolute. Surrounding elements stay in their normal flow. Child elements can be positioned with accompanying float and clear properties.

Relative positioning is one way to permit elements to be side-by-side:

The parent container of these 3 side-by-side elements is set to position: relative, which allows these colored containers to be set to float next to each other. …Suspendisse a porta ante, a interdum tortor. Donec placerat, velit non aliquet tempor, lacus neque cursus neque, sit amet consequat turpis leo eget nisl.
Nulla ultricies magna eget posuere elementum. Phasellus quis ipsum tempor magna tempus scelerisque et id tellus. Sed tempor aliquet ante, tincidunt scelerisque lorem euismod non. Curabitur auctor massa erat, ac tristique tortor semper at. Vestibulum sollicitudin tincidunt quam, et euismod turpis cursus in. Phasellus porta gravida risus, a ullamcorper turpis fermentum sed. Vivamus porttitor luctus nisi non pellentesque. Sed lacus neque, imperdiet eu ornare ut, tincidunt vitae turpis. Vestibulum sollicitudin tincidunt quam, et euismod turpis cursus in. Fusce non magna sed sapien ornare elementum. Phasellus quis ipsum tempor magna tempus scelerisque et id tellus.
Nulla ultricies magna eget posuere elementum. Phasellus quis ipsum tempor magna tempus scelerisque et id tellus. Sed tempor aliquet ante, tincidunt scelerisque lorem euismod non. Curabitur auctor massa erat, ac tristique tortor semper at. Vestibulum sollicitudin tincidunt quam, et euismod turpis cursus in.
To return the document to its normal flow after a series of floated elements, you use the clear property.