 |
New Perspectives on HTML
Tutorial
|
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.
Sample paragraph moves in relation to the placement of the outer and inner boxes.
CSS Positioning allow elements to be placed in alternate locations, possibly outside their normal flow.
Normal flow: Elements displayed in the order in which they are coded.
Elements can be placed after each other, or they can be nested in each other.
Some reasons for positioning: page layout, positioning elements for tasks such as slide shows, animation, drop-down menus, etc.
Static: The default. Normal flow rendering.
Fixed: Location is based on browser viewport, at a fixed positioned. Does not even move when page is scrolled.
Relative: Location relative and will cause element to be out of its normal flow. Other content will NOT be adjusted to fit into any gap left by the element. Is often used as a point of reference for absolutely positioned elements.
Absolute: located outside of normal flow. Other items will move to fill the gap.
Inherit: Means that the current element receives the same value as its parent element.
They are used along with the properties of top, left right, & bottom
Source: The demo was created by Carey, P. New Perspectives on HTML, Course Technology Publishers. It was modified by Christine Moore