Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Fixed Positioning with CSS
Even the simplest designs can look fantastic and work correctly with a little CSS knowledge, which will increase your design abilities and improve the user experience on your website.
To specify where an element appears on the page, we use the CSS position property. The position property determines the element's final positioning when combined with the top, right, bottom, and left CSS properties. There are various possible values for the position property: absolute, sticky, fixed, relative, and static. In this article we are going to learn about the CSS fixed positioning.
CSS fixed positioning
An element with a position:fixed is positioned in relative to the browser window, or viewport. A fixed positioned element will remain in its original location when the page is scrolled since the viewport is unaffected by window scrolling. This may be applied to a navigation bar, for example, that you want to be displayed at all times regardless of how the page scrolls.
Syntax
Following is the syntax for CSS fixed position −
position:fixed;
Example
Let's look at the following example, where we are going to use the position:fixed for header.
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: verdana;
color: #DE3163;
}
h1 {
position: fixed;
border: 1px solid #1C2833;
font-size: 40px;
color: #1E8449;
}
p {
font-size: 19px;
}
</style>
</head>
<body>
<h1>TUTORIALSPOINT</h1>
<br>
<br>
<br>
<br>
<p>Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms.</p>
<p>The journey commenced with a single tutorial on HTML in 2006 and elated by the response it generated, we worked our way to adding fresh tutorials to our repository which now proudly flaunts a wealth of tutorials and allied articles on topics ranging from programming languages to web designing to academics and much more.</p>
<p>Our Text Library Content and resources are freely available and we prefer to keep it that way to encourage our readers acquire as many skills as they would like to. We don't force our readers to sign up with us or submit their details either to use our Free Text Tutorials Library. No preconditions and no impediments, Just Simply Easy Learning!</p>
<p>We have established a Digital Content Marketplace to sell Video Courses and eBooks at a very nominal cost. You will have to register with us to avail these premium services. Our mission is to deliver Simply Easy Learning with clear, crisp, and to-the-point content on a wide range of technical and non-technical subjects without any preconditions and impediments.</p>
</body>
</html>
When we run the above code, it will generate an output consisting of the text where the header is fixed displayed on the webpage.
Example
Considering another scenario, where we are going to create a position:fixed for the image
<!DOCTYPE html>
<html>
<head>
<style>
.tp {
top: 300px;
left: 110px;
position: fixed;
opacity: 60%;
}
p {
color: #DE3163;
font-family: verdana;
font-size: 21px;
}
h1 {
font-family: verdana;
color: #1E8449;
text-align: center;
}
</style>
</head>
<body>
<h1>TUTORIALSPOINT</h1>
<P>Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms.</P>
<P>The journey commenced with a single tutorial on HTML in 2006 and elated by the response it generated, we worked our way to adding fresh tutorials to our repository which now proudly flaunts a wealth of tutorials and allied articles on topics ranging from programming languages to web designing to academics and much more.</P>
<p>Our Text Library Content and resources are freely available and we prefer to keep it that way to encourage our readers acquire as many skills as they would like to. We don't force our readers to sign up with us or submit their details either to use our Free Text Tutorials Library. No preconditions and no impediments, Just Simply Easy Learning!</p>
<div class="tp">
<img src="https://www.tutorialspoint.com/cg/images/logo.png" alt="logo">
</div>
</body>
</html>
On running the above code, the output window will pop up, displaying the text along with an image whose position is fixed on the webpage.
Example
In the following example, we are going to make the footer element fixed.
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: #DE3163;
font-family: verdana;
font-size: 20px;
}
h1 {
color: #229954;
font-family: verdana;
text-align: center;
}
.tp {
width: 100%;
text-align: center;
background: #BFC9CA;
font-size: 20px;
padding: 7px;
color: #DE3163;
position: fixed;
bottom: 10PX;
}
</style>
</head>
<body>
<h1>TUTORIALSPOINT</h1>
<p>Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms.</p>
<p>The journey commenced with a single tutorial on HTML in 2006 and elated by the response it generated, we worked our way to adding fresh tutorials to our repository which now proudly flaunts a wealth of tutorials and allied articles on topics ranging from programming languages to web designing to academics and much more.</p>
<p>Our Text Library Content and resources are freely available and we prefer to keep it that way to encourage our readers acquire as many skills as they would like to. We don't force our readers to sign up with us or submit their details either to use our Free Text Tutorials Library. No preconditions and no impediments, Just Simply Easy Learning!</p>
<p>We have established a Digital Content Marketplace to sell Video Courses and eBooks at a very nominal cost. You will have to register with us to avail these premium services. Our mission is to deliver Simply Easy Learning with clear, crisp, and to-the-point content on a wide range of technical and non-technical subjects without any preconditions and impediments.</p>
<div class="tp">
<div>© Copyright 2023. All Rights Reserved.</div>
</div>
</body>
</html>
On running the above code, it will generate an output consisting of the text along with a footer whose position is fixed displayed on the webpage.
276 Views
