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 margin of 50px. In the body is a div (grid_holder) which has grid background ruled at 20 and 100px.
This page demonstrates seven squares positioned in the Initial containing block using position: absolute; All boxes are 50px square and with a brown border (The height and width of the boxes is 48px and the border 1px wide making 50px outer dimension.)
The position details of the squares are
Square 1 position: absolute; top: 0px; left: 0px;
Square 2 position: absolute; top: 0px; right: 0px;
Square 3 position: absolute; bottom: 0px; left: 0px;
Square 4 position: absolute; bottom: 0px; right: 0px;
Square 5 position: absolute; top: 200px; left: 100px;
Square 6 position: absolute; top: 300px; left: 20%;
Square 7 position: absolute; bottom: 0px; left: 50%; margin-left: -25px;
What to look for:
As you alter the viewport squares 1 to 4 should remain in the corners. There should be no gap. Squares 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 (50px from body edge).
Square 6 should move as the viewport width is altered. When the viewport width is just enough to touch the right edge of the body, the viewport will be 650px wide. The left edge of square 6 should be 130px from the viewport edge (80px from body edge).
When first opened, the Viewport corresponds to the Initial containing block. If you scroll the window these no longer correspond and all squares should scroll. (To make scrolling possible you may have to reduce your viewport size so that it cannot accommodate the full page.)
Square 7 should appear centred between squares 3 and 4.
Note that for squares 5 and 6 it is the left side for which the position is defined. It is often the centre that we wish to position. By setting a negative margin of half the item's width the square is offset so that square 7 remains horizontally centred.
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.