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

Absolute Positioning – Demonstration 2

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 a left and right margin are 'auto'. In the body is a grid holder ruled at 20 and 100px.

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

What to look for:

As you alter the viewport squares 1 to 4 should remain in the corners. There should be no gap. Square 1 should just touch the corner of the viewport. If you scroll the page the squares will also scroll.

Square 5 should remain 100px from the viewport edge.

Square 6 should move as the viewport width is altered. When the viewport width is set just wide enough to fit the grid holder the viewport will be 600px wide. The left edge of square 5 should be 120px from the viewport edge.

Square 7 should appear centred between squares 3 and 4.


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.