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

Absolute Positioning – Demonstration 4

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 a width fixed at 600px and the left and right margin are set to 'auto'. 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:

None of the squares move. Their positions are now related to the body rather than the viewport.

As you alter the viewport nothing changes other than the margin around the body. Squares 1 to 4 should remain in the corners of the body. There should be no gap. Squares should just touch the corner of the body.

Square 5 is 100px from the body edge.

Square 6 is 120px from the body edge. (20% of 600)

Square 7 is centred horizontally on the 300px 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.