|
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:500px;
height:60px;
}
p {
position:relative;
top:10px;
}
|
The HTML code,
<div>
<p>Sample text.
</div>
|
renders
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:500px;
height:60px;
}
p {
position:relative;
top:-10px;
}
|
The HTML code,
<div>
<p>Sample text.
</div>
|
renders
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
Link to this page: If you find this page useful, we encourage you to link to this page. Simply copy and paste the code below to your website, blog, or profile.
|