The fixed value of the position property that fixes the position of an element with respect to the rest of the Web content. Now create a Web page named fixedposition.html to understand how to fix the position of an element.
<!doctype html>
<head>
<title>fixed position </title>
<STYLE type="text/css">
.pos-fixed{
position:fixed;
bottom:10px;
right:5px;
}
</STYLE>
</head>
<body>
<h1>Fixing the Position of the content</h1>
<a href="feedback.html"><p class="pos-fixed">Back </p></a>
<p>In this Web page we have fixed the position of the Back button to page. The Back button remain fixed at this position even if you scroll the page.</p>
<img src="Desert.jpg">
<p>We are at the bottom of the web page and the image showing an Back button displays at the same position of the page.</p>
<br><br>
</body>
</html>
The output of the above Web page:
<!doctype html>
<head>
<title>fixed position </title>
<STYLE type="text/css">
.pos-fixed{
position:fixed;
bottom:10px;
right:5px;
}
</STYLE>
</head>
<body>
<h1>Fixing the Position of the content</h1>
<a href="feedback.html"><p class="pos-fixed">Back </p></a>
<p>In this Web page we have fixed the position of the Back button to page. The Back button remain fixed at this position even if you scroll the page.</p>
<img src="Desert.jpg">
<p>We are at the bottom of the web page and the image showing an Back button displays at the same position of the page.</p>
<br><br>
</body>
</html>
The output of the above Web page:
Now scroll the Web page and note that the fixed Back button remains at the same position, shown in output.
No comments:
Post a Comment