Demo Page: Absolute Positioning

Layout sample using CSS property 'position: absolute'.

Look in the head tag of this html file (or view source) for the CSS for this page.

Absolute positioning allows for special positioning

Absolutely positioned DIVs, like this one, are “removed” from normal flow and positioned in relation to the top-left corner of their parent element (in this case, the DIV called "content"). When something has absolute positioning applied, it goes where directed independent of other what othe elements are doing. The parent has to be set to position: relative for absolute children to work.
This div is positioned 250px from the left edge of its parent.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur luctus condimentum commodo. 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. Fusce non magna sed sapien ornare elementum. 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.

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. Fusce non magna sed sapien ornare elementum. 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.

Vivamus porttitor luctus nisi non pellentesque. Sed lacus neque, imperdiet eu ornare ut, tincidunt vitae turpis. 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. Fusce non magna sed sapien ornare elementum. Phasellus porta gravida risus, a ullamcorper turpis fermentum sed.

sticker with absolute positioning

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. Fusce non magna sed sapien ornare elementum. 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.