Scholar Repository
Home>Manual>CSS Top Property

CSS Top Property

From http://www.w3schools.com (Copyright Refsnes Data)

CSS top Property


CSS Reference 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.


CSS Reference Complete CSS Reference

From http://www.w3schools.com (Copyright Refsnes Data)

Home>Manual>CSS Top Property