We can relatively position an element by setting the value of the position property to relative. Now create a Web page named relativeposition.html to understand how to set the position of an element as relative.Show the code of relativeposition.html file.
<!DOCTYPE HTML>
<HEAD>
<TITLE>Relative position </TITLE>
<STYLE type="text/css">
.pos-left{
position:relative;
left:-20px;
}
.pos-right{
position:relative;
left:20px;
}
</STYLE>
</HEAD>
<BODY>
<H1>Showing Relative Position of The Text </H1>
<P>Normal positioning</P>
<P class="pos-left">Paragraph is moved 20px left with respect to the normal positioning</P>
<P class="pos-right">Paragraph is moved 20px right with respect to the normal positioning</P>
</BODY>
</HTML>
Here three P elements are used to display three paragraphs. The first paragraph is displayed at its default position. the position of the second paragraph is set to left using the position and left properties and the position of the third paragraph is set to right using the position and right properties. The position property in case of second and third paragraph is set to relative.
The output of Above document is:
<!DOCTYPE HTML>
<HEAD>
<TITLE>Relative position </TITLE>
<STYLE type="text/css">
.pos-left{
position:relative;
left:-20px;
}
.pos-right{
position:relative;
left:20px;
}
</STYLE>
</HEAD>
<BODY>
<H1>Showing Relative Position of The Text </H1>
<P>Normal positioning</P>
<P class="pos-left">Paragraph is moved 20px left with respect to the normal positioning</P>
<P class="pos-right">Paragraph is moved 20px right with respect to the normal positioning</P>
</BODY>
</HTML>
Here three P elements are used to display three paragraphs. The first paragraph is displayed at its default position. the position of the second paragraph is set to left using the position and left properties and the position of the third paragraph is set to right using the position and right properties. The position property in case of second and third paragraph is set to relative.
The output of Above document is:
No comments:
Post a Comment