Square
1
Square
2
Square
3
Square
4
Square
5
Square
6
Square
7

Absolute Positioning – Demonstration 5

First in series
Next in series

Close this window to return.

All styles relevant to positioning are located in an internal style sheet. View the source to inspect them.

Page summary. The body of this page has no set width and a margin of 50px. In the body is a grid holder ruled at 20 and 100px. The body has position: relative

Squares are styled exactly as for the first in the series.

What to look for:

Only squares 6 and 7 move relative to the body. Their positions are now related to the body rather than the viewport.

As you alter the width of the viewport squares 1 to 4 should remain in the corners of the body. There should be no gap.

Square 5 is 100px from the body edge.

Square 6 is positioned at 20% of the body width from the edge of the body.

Square 7 is centred horizontally on the centre line of the body.


Etiam sed mi vitae augue volutpat consectetuer. Cras orci purus, blandit et, semper condimentum, ornare in, lacus. Morbi enim. Nulla vitae felis non sem feugiat dignissim. Nullam pretium est non massa. Curabitur lacinia sollicitudin wisi. Duis malesuada venenatis sapien. Pellentesque quis felis. Aenean et nisl. Sed consectetuer, enim sed gravida volutpat, urna libero ullamcorper tortor, tincidunt viverra lorem nisl fermentum risus. Sed eu massa. Quisque ultricies. Vestibulum nisl libero, fermentum ut, posuere eget, commodo vitae, pede. Donec euismod vehicula leo. Duis a massa. Aenean vestibulum condimentum nibh. Donec leo lorem, elementum et, scelerisque pellentesque, tempus ut, libero. Nulla facilisi. Vivamus ante nibh, blandit eu, volutpat et, faucibus quis, libero.

Quisque ornare, orci id malesuada interdum, risus urna sodales neque, porttitor tincidunt massa neque vel pede. Vestibulum ipsum neque, semper eu, luctus id, faucibus aliquam, tellus. Nam id augue sed quam viverra tristique. Suspendisse est massa, ultricies eget, ullamcorper sit amet, iaculis pulvinar, tellus. Vestibulum dapibus porta libero. Morbi vel leo et nunc volutpat blandit. Donec vehicula sem eget turpis. Mauris diam turpis, sagittis nec, adipiscing a, fringilla et, nibh. Morbi commodo elit id mauris. Praesent consequat libero a est. Nulla facilisi. Suspendisse eleifend. Phasellus interdum lorem ac felis. In hac habitasse platea dictumst. Quisque ipsum.