CSS Positioning Properties

CSS Positioning properties define the position of an element.

Examples

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.

Set the left and top position of an element
This example demonstrates how to set the left and top position of an element.

Set the right and bottom position of an element
This example demonstrates how to set the right and bottom position of an element.

Overflow
This example demonstrates how to set the overflow property to specify what should happen when an element's content is too big to fit in a specified area.

Vertical align an image
This example demonstrates how to vertical align an image in a text.

Z-index
Z-index can be used to place an element "behind" another element, using Z-index priority.

Z-index
Check that the elements now have changed their Z-index priority.

CSS Positioning

The 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.

Positioning Properties:

NN: Netscape, IE: Internet Explorer, W3C: Web Standard

Property	Description	Values	NN	IE	W3C
bottom	Sets how far the bottom edge of an element is above/below the bottom edge of the parent element	auto % length	6.0	5.0	CSS2
clip	Sets the shape of an element. The element is clipped into this shape, and displayed	shape auto	6.0	4.0	CSS2
left	Sets how far the left edge of an element is to the right/left of the left edge of the parent element	auto % length	4.0	4.0	CSS2
overflow	Sets what happens if the content of an element overflow its area	visible hidden scroll auto	6.0	4.0	CSS2
right	Sets how far the right edge of an element is to the left/right of the right edge of the parent element	auto % length		5.0	CSS2
top	Sets how far the top edge of an element is above/below the top edge of the parent element	auto % length	4.0	4.0	CSS2
vertical-align	Sets the vertical alignment of an element	baseline sub super top text-top middle bottom text-bottom length %	4.0	4.0	CSS1
z-index	Sets the stack order of an element	auto number	6.0	4.0	CSS2

Jump to: Top of Page or HOME or Printer friendly page

Search W3Schools:

What Others Say About Us

Does the world know about us? Check out these places:

Dogpile Alta Vista MSN Google Excite Lycos Yahoo Ask Jeeves

We Help You For Free. You Can Help Us!

W3Schools is for training only. We do not warrant its correctness or its fitness for use. The risk of using it remains entirely with the user. While using this site, you agree to have read and accepted our terms of use and privacy policy.

How we converted to XHTML

Domain Name
Registration & More!

Your own Web Site?

Read W3Schools
Hosting Tutorial

$15 Domain Name
Registration
Save $20 / year!

Advertise
at W3Schools

Only 0.5 CPM

SELECTED LINKS

University Online
Master Degree
Bachelor Degree

Web Software

The Future of
Web Development

Jobs and Careers

Web Security
Web Statistics
Web Standards

PARTNERS

W3Schools
TopXML
VisualBuilder
XMLPitstop
DevelopersDex
DevGuru
Programmers Heaven
The Code Project
Tek Tips Forum
ZVON.ORG
TopXML Search