CSS top Property
 Complete CSS Reference
Definition
The top property specifies the top edge of an element.
Note: If the "position" property has a value of
"static", the "top" property has no effect.
Inherited: No
JavaScript Syntax
CSS properties can also be dynamically changed with a JavaScript.
Scripting Syntax: object.style.top="100px"
In our HTML DOM tutorial you can find more details about the
top property.
In our HTML DOM tutorial you can also find a full
Style Object Reference.
Example
|
This example sets the top edge of the paragraph 20 px below
the top edge of the window:
p
{
position: absolute;
top: 20px
}
This example sets the top edge of the paragraph 20 px above
the top edge of the window:
p
{
position: absolute;
top: -20px
}
|
Possible Values
| Value |
Description |
| auto |
Default. Lets the browser calculate the top position |
| % |
Sets the top position in % from the top edge of the
window |
| length |
Sets the top position in px, cm, etc. from the top
edge of
the window. Negative values are allowed
|
Try-It-Yourself Demos
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 top edge of an image using a percent value
This example demonstrates how to set the top edge of an element using a percent
value.
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.
Complete CSS Reference
Whether you're new to XML or already an advanced user, the user-friendly views
and powerful entry helpers, wizards, and debuggers in XMLSpy are designed to
meet your XML and Web services development needs from start to finish.
- XML editor
- Graphical XML Schema / DTD editors
- XSLT 1.0/2.0 editor, debugger, profiler
- XQuery editor, debugger, profiler
- Support for Office Open XML (OOXML)
- Graphical WSDL editor & SOAP debugger
- Java, C#, C++ code generation
- And much more!
Download a fully functional free 30-day trial today!
| 
