The
Classification properties allow you to control how to display an element, set where an image will appear in another element, position an element relative to its normal position, position an element using an absolute value, and how to control the visibility of an element.
CSS Positioning
The position property changes how elements are positioned. position: value; Values: static relative absolute fixed
Static
Static positioning is by default the way an element will appear in the normal flow of your (X)HTML file. It is not necessary to declare a position of static. Doing so, is no different than not declaring it at all. position: static;
Relative
Positioning an element relatively places the element in the normal flow of your (X)HTML file and then offsets it by some amount using the properties left, right, top and bottom. This may cause the element to overlap other elements that are on the page, which of course may be the effect that is required. position: relative;
Absolute
Positioning an element absolutely, removes the element from the normal flow of your (X)HTML file, and positions it to the top left of its nearest parent element that has a position declared other than static. If no parent element with a position other than static exists then it will be positioned from the top left of the browser window. position: absolute;
Fixed
Positioning an element with the fixed value, is the same as absolute except the parent element is always the browser window. It makes no difference if the fixed element is nested inside other positioned elements. Furthermore, an element that is positioned with a fixed value, will not scroll with the document. It will remain in its position regardless of the scroll position of the page. At this time IE6 (Internet Explorer 6) does not support the fixed value for the positioning of an element. Thus it will not position fixed elements correctly and will still scroll with the page. To see this effect in action you will need to use a standards compliant browser, such as Firefox 1.0 position: fixed; When positioning elements with relative, absolute or fixed values the following properties are used to offset the element: top left right bottom position: absolute; top: 10px; right: 10px;
Clear
You can control if an element allows floated elements to its sides with the clear property clear: value;
None
This is the default setting, floated elements can appear on either side of the element set to clear: none;
Both
Setting the value to both, causes no floated elements to appear on either side of the element set to clear: both;
Left
Setting the value to left, causes no floated elements to appear to the left side of the element set to clear: left;
Right
Setting the value to right, causes no floated elements to appear to the right side of the element set to clear: right;
Clip
You can control how much of an element is visible with the clip property
Values
auto shape Currently the only shape recognized by the clip property is rect (rectangle) clip: rect(10px, 10px, 10px, 10px
Cursor
You can control the style of cursor to be used in an element with the cursor property cursor: value; auto crosshair default help move pointer text url wait e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize
Display
You can control how an element is displayed with the display property
Block
Creates a line break before and after the element
Inline
No line break is created
List Item
Creates a line break before and after the element and adds a list item marker
None
Makes an element not display on the page
Float
The float property changes how text and or images within an element are displayed float: value;
Left
The image/text is displayed to the left of the parent element
Right
The image/text is displayed to the right of the parent element
None
There is no change in the way the image/text is displayed
Overflow
You can control what an elements contents will do if it overflows it boundaries with the overflow property overflow: value;
Visibility
You can control if an element is visible or not with the visibility property visibility: value; Values: hidden visible
Z-Index
You can control the layer order of positioned elements with the z-index property z-index: value; Values: auto number
up