Css position

Static
This is the default value.
The element will appear in it's normal place as defined by the xhtml
Fixed
An element with fixed position is positioned relative to the browser window.
The element in the top left corner has fixed position
[E + -] Position: Fixed
[E + -] Top: 0px
[E + -] Left: .4em position: fixed; top: 0px; left: .4em; Absolute
An absolute position element is positioned relative to the first parent element that has a position other than static. If no such element is found, the containing block is <html>:
[E + -] Position: Absolute
[E + -] Top: 0px
[E + -] Left: 4emposition: absolute; top: 0px; left: 4em; Relative
A relative positioned element is positioned relative to its static position.
[E + -] Position: Relative
[E + -] Top: -.75em
[E + -] Left: 2.6emposition: relative; top: -.75em; left: 2.6em;Left Right Top Bottom
you can use any of the css units
negative values are allowed
[left] Sets the left margin edge for a positioned box
[right] Sets the right margin edge for a positioned box
[top] Sets the top margin edge for a positioned box
[bottom] Sets the bottom margin edge for a positioned box
Text overflow
Specifies what happens if content overflows an element's box
[visible] The overflow is not clipped. It renders outside the element's box. This is default
[hidden] The overflow is clipped, and the rest of the content will be invisible
[scroll] The overflow is clipped, but a scroll-bar is added to see the rest of the content
[auto] If overflow is clipped, a scroll-bar should be added to see the rest of the content
[E + -] Text overflow: Auto overflow: auto;
Z-coordinate
When elements are positioned outside the normal flow, they can overlap other elements.
The z-index property specifies the stack order of an element (which element should be placed in front of, or behind, the others).
An element can have a positive or negative stack order:
[E + -] Z coordinate: -1 z-index: -1;Positioning demo
All the xhtml for the demos is in this box. I have used positioning to move them around the page

static

fixed

absolute

relative

TEXT
OVERFLOW
AUTO
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ornare varius malesuada. Aliquam et augue id mauris adipiscing placerat. Nunc ac dui eros, ut laoreet eros. Sed sapien massa, gravida eget tincidunt sed, vestibulum a dui. Curabitur vitae ultricies est. Vestibulum vitae nulla ut nisl tristique tincidunt. Vivamus purus mi, interdum vitae faucibus ut, euismod sit amet dolor.
TEXT
OVERFLOW
AUTO

z coord

Back

Main Page