Course Technology Cengage Learning New Perspectives on HTML and CSS
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 column of input fields sets the position of the larger red box. The second column 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.