CSS Positioning

The CSS positioning properties allows you to position an element.

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 show overflow in an element using scroll
This example demonstrates how to set the overflow property to create a scroll bar when an element's content is too big to fit in a specified area.

How to hide overflow in an element
This example demonstrates how to set the overflow property to hide the content if it is too big to fit in a specified area.

How to set the browser to automatically handle overflow
This example demonstrates how to set the browser to automatically handle overflow.

Vertical alignment of an image
This example demonstrates how to set the vertical align of an image in a text.

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.

CSS Positioning Properties

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.

Browser support: IE: Internet Explorer, F: Firefox, N: Netscape.

W3C: The number in the "W3C" column indicates in which CSS recommendation the property is defined (CSS1 or CSS2).

Property Description Values IE F N W3C

bottom Sets how far the bottom edge of an element is above/below the bottom edge of the parent element auto
%
length 5 1 6 2

clip Sets the shape of an element. The element is clipped into this shape, and displayed shape
auto 4 1 6 2

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 1 4 2

overflow
Sets what happens if the content of an element overflow its area visible
hidden
scroll
auto 4 1 6 2

position Places an element in a static, relative, absolute or fixed position static
relative
absolute
fixed 4 1 4 2

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 1 6 2

top Sets how far the top edge of an element is above/below the top edge of the parent element auto
%
length 4 1 4 2

vertical-align Sets the vertical alignment of an element baseline
sub
super
top
text-top
middle
bottom
text-bottom
length
% 4 1 4 1

z-index Sets the stack order of an element auto
number 4 1 6 2

Learn XML with Stylus Studio XML Editor – Free Download

Stylus Studio provides tools for editing and debugging XML, XSLT, XML Schema, DTD, XQuery, Web Services,and more!

Using Stylus Studio XML Tools You Can:

Convert any File to XML (CSV, Tab-separated, HTML, EDI & more.) Access and Update any database as XML (SQL Server, Oracle, MySQL & more.) View, Edit, Parse, and Validate XML files. Publish your data, including XML to HTML or XML to PDF

See why millions use Stylus Studio as their preferred XML tool. Download a FREE TRIAL or watch an online VIDEO DEMO today!

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

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