CSS Top

The top property specifies the distance from the top of the element to the default location of the element (when position=relative) or the distance between the top of the element and the top of the container (when position=absolute). This can be specified as a percentage, as a length, or 'auto'.

Let's take a look at two examples:

Example 1: CSS Code

div {
background-color:#FF00FF;
width:90%;
height:60px;
}
p {
position:relative;
top:10px;
}

The HTML code,

<div>
<p>Sample text.
</div>

renders

Sample text.

Without using the top property, the text would have appeared right against the top edge of the pink container. In the above example, the text is 10px from the default location.

Example 2: CSS Code

div {
background-color:#FF00FF;
width:90%;
height:60px;
}
p {
position:relative;
top:-10px;
}

The HTML code,

<div>
<p>Sample text.
</div>

renders

Sample text.

In the above example, the text is 10px above the default location. So, when a relative position is specified, a positive value for "top" means the element is located below the default location, while a negative value for "top" means the element is located above the default location.

Next: CSS Bottom

AdBlock Detected!