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 |
 |
W3Schools' Online Certification Program
The perfect solution for professionals who need to balance work, family, and career building.
More than 3500 certificates already issued!
|
The HTML Certificate documents your knowledge of HTML, XHTML, and CSS.
The JavaScript Certificate documents your knowledge of JavaScript and HTML DOM.
The XML Certificate documents your knowledge of XML, XML DOM and XSLT.
The ASP Certificate documents your knowledge of ASP, SQL, and ADO.
The PHP Certificate documents your knowledge of PHP and SQL (MySQL).
| 
