The Absolute value of the position property makes the position of an element absolute with respect to the rest of the Web content. Now Create a Web page named absoluteposition.html to learn how to set the position of an element as absolute.
<!doctype html>
<head>
<title>Absolute Positing using Position Attribute</title>
<style type="text/css">
.absolute{
position:absolute;
left:100px;
top:150px;
}
.absolute2{
position:absolute;
left:10px;
top:50px;
}
</style>
</head>
<body>
<h1 class="absolute">This is a heading with an absolute position</h1>
<img class="absolute2" style="height:100px;width:100px;" src="bike.jpg">
<p>
This is a first paragraph<br>
This is a first paragraph<br>
This is a first paragraph<br>
This is a first paragraph<br>
This is a first paragraph<br>
This is a first paragraph<br>
This is a first paragraph<br>
This is a first paragraph<br>
This is a first paragraph<br>
This is a first paragraph<br>
This is a first paragraph<br>
This is a first paragraph<br>
This is a first paragraph<br>
This is a first paragraph<br>
This is a first paragraph<br>
</p>
</body>
</html>
The h1 element is absolutely positioned at 100px left and 150px top, and the image of a car is absolutely positioned at 10px left and 50px top. The absolutely positioned elements do not follow the normal flow of document and overlap the p element appearing in their path.
The output of the above document:
<!doctype html>
<head>
<title>Absolute Positing using Position Attribute</title>
<style type="text/css">
.absolute{
position:absolute;
left:100px;
top:150px;
}
.absolute2{
position:absolute;
left:10px;
top:50px;
}
</style>
</head>
<body>
<h1 class="absolute">This is a heading with an absolute position</h1>
<img class="absolute2" style="height:100px;width:100px;" src="bike.jpg">
<p>
This is a first paragraph<br>
This is a first paragraph<br>
This is a first paragraph<br>
This is a first paragraph<br>
This is a first paragraph<br>
This is a first paragraph<br>
This is a first paragraph<br>
This is a first paragraph<br>
This is a first paragraph<br>
This is a first paragraph<br>
This is a first paragraph<br>
This is a first paragraph<br>
This is a first paragraph<br>
This is a first paragraph<br>
This is a first paragraph<br>
</p>
</body>
</html>
The h1 element is absolutely positioned at 100px left and 150px top, and the image of a car is absolutely positioned at 10px left and 50px top. The absolutely positioned elements do not follow the normal flow of document and overlap the p element appearing in their path.
The output of the above document:
No comments:
Post a Comment