CSS Positioning
The CSS positioning properties allow you to specify the left, right, top, and
bottom position of an element. It also allows you to set the shape of an
element, place an element behind another, and to specify what should happen when an element's content
is too big to fit in a specified area.
Examples
Position:relative
This example demonstrates how to position an element relative to its normal position.
Position:absolute
This example demonstrates how to position an element using an absolute value.
Position:fixed
This example demonstrates how to position an element with relative to the
browser window.
Set the shape of an element
This example demonstrates how to set the shape of an element. The element is
clipped into this shape, and displayed.
How to handle
overflow in an element
This example demonstrates how to set the overflow property when an element's content
is too big to fit in a specified area.
Z-index
Z-index can be used to place an element "behind" another element.
Z-index
The elements in the example above have now changed their Z-index.
Set the top
edge of an image using a pixel value
This example demonstrates how to set the top edge of an element using a pixel
value.
Set
the left edge of an image using a percent value
This example demonstrates how to set the left edge of an element using a percent
value.
All CSS Positioning Properties
The number in the "CSS" column indicates in which CSS version
the property is defined (CSS1 or CSS2).
| Property |
Description |
Values |
CSS |
| bottom |
Sets the bottom margin edge for a positioned box |
auto
length
%
inherit |
2 |
| clip |
Clips an absolutely positioned element |
shape
auto
inherit |
2 |
| left |
Sets the left margin edge for a positioned box |
auto
length
%
inherit |
2 |
overflow
|
Specifies what happens if content overflows an element's
box |
auto
hidden
scroll
visible
inherit |
2 |
| position |
Specifies the type of positioning for an element |
absolute
fixed
relative
static
inherit |
2 |
| right |
Sets the right margin edge for a positioned box |
auto
length
%
inherit |
2 |
| top |
Sets the top margin edge for a positioned box |
auto
length
%
inherit |
2 |
| z-index |
Sets the stack order of an element |
number
auto
inherit |
2 |
729,913 sites built with Wix. Make your own
Click here to design a Stunning Flash Website for Free
Wix is a revolutionary web design tool that provides anyone with the possibility to create professional and beautiful websites for free.
With e-commerce features, search engine visibility and many more professional tools, Wix is the ultimate solution for creating a spectacular site while saving tons of money.
| 
