Course Technology Cengage Learning New Perspectives on HTML, CSS and Dynamic HTML
Tutorial 4

CSS Positioning

This page demonstrates how different position styles affect layout. Select position values from the selection lists and input boxes below. The first row of input fields sets the position of the larger red box. The second row of input fields sets the position of the smaller yellow box. To reset both colored boxes to their default positions, click the reset button. The position of the paragraph with the dotted outline can't be set, but it may change in relation to the movements of the two colored boxes.

position left top
outer
inner
 

Sample paragraph moves in relation to the placement of the outer and inner boxes.