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 |
The Altova MissionKit is a suite of intelligent XML tools, including:
XMLSpy® – industry-leading XML editor
- Support for all XML-based technologies
- Graphical editing views, powerful debuggers, code generation, & more
MapForce® – graphical data mapping tool
- Drag-and-drop data conversion with code generation
- Support for XML, DBs, EDI, Excel® 2007, text, Web services
StyleVision® – visual stylesheet designer
- Drag-and-drop stylesheet design for XML & databases
- Output to HTML, PDF, RTF, Word 2007, & more
And more…
Try before you buy with a free fully functional 30-day trial
Download today
 |
|
Get Your Diploma!
W3Schools' Online Certification Program is the perfect solution for busy
professionals who need to balance work, family, and career building.
The HTML Certificate is for developers who want to document their knowledge of HTML, XHTML, and CSS.
The JavaScript Certificate is for developers who want to document their knowledge of JavaScript and the HTML DOM.
The ASP Certificate is for developers who want to document their knowledge of ASP, SQL, and ADO.
|
| 
HOME
Printer friendly page
