Introduction to CSS Position Fixed
In CSS Position Fixed, fixed is a value applied with position property. This position property is used to align the elements at the desired location. This fixed position always sticks to a specific location and it can’t be moved any side of the page. Even we minimize or maximize the page also its position fixed only.
Real-Time Scenario: Let suppose if we have a footer area then we also fixed this part at the bottom of the page only. If we want any element to be fixed at any position then we go for the position: fixed attribute
How does position fixed work?
The fixed value is always applied with position attributes. This fixed value fixes any HTML element at a fixed position even we scroll up or scroll down the page.
Code:
element
{
position: fixed;
}
Examples to Implement CSS Position Fixed
Below are some examples mentioned:
Example #1
Header fixed position
Code:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
position: fixed;
border: 3px solid pink;
}
p
{
color: green;
border: 2px solid gray;
font-size: 20px;
}
h1
{
color: blue;
}
</style>
</head>
<body>
<h1>Introduction Fixed Position in CSS</h1>
<br>
<br>
<br>
<p>Fixed is a value applied with position property. This position property is used to align the elements at desired location. This fixed position always stick to specific
location and it can't be moved any side of the page. Even we minimize or maximize the page also it's position fixed only.</p>
<p>Real Time Scenario: Let suppose if we have footer area then we also fixed this part at the bottom of the page only. If we want any element to be fixed at any position then
we go for position: fixed attribute.</p>
<p>Fixed is a value applied with position property. This position property is used to align the elements at desired location. This fixed position always stick to specific
location and it can't be moved any side of the page. Even we minimize or maximize the page also it's position fixed only.</p>
<p>Real Time Scenario: Let suppose if we have footer area then we also fixed this part at the bottom of the page only. If we want any element to be fixed at any position then
we go for position: fixed attribute.</p>
<p>Fixed is a value applied with position property. This position property is used to align the elements at desired location. This fixed position always stick to specific
location and it can't be moved any side of the page. Even we minimize or maximize the page also it's position fixed only.</p>
<p>Real Time Scenario: Let suppose if we have footer area then we also fixed this part at the bottom of the page only. If we want any element to be fixed at any position then
we go for position: fixed attribute.</p>
<p>Fixed is a value applied with position property. This position property is used to align the elements at desired location. This fixed position always stick to specific
location and it can't be moved any side of the page. Even we minimize or maximize the page also it's position fixed only.</p>
<p>Real Time Scenario: Let suppose if we have footer area then we also fixed this part at the bottom of the page only. If we want any element to be fixed at any position then
we go for position: fixed attribute.</p>
</body>
</html>
Output:
Before Scroll down:
After Scroll down:
Example #2
Footer fixed position
Code:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
border: 3px solid brown;
}
p
{
color: fuchsia;
border: 2px solid red;
font-size: 20px;
}
h1
{
color: blue;
text-align: center;
}
.container{
width: 80%;
margin: 0 auto;
}
.fixed-header, .fixed-footer{
width: 100%;
background: black;
padding: 10px 0;
color: white;
position: fixed;
}
.fixed-footer{
bottom: 0;
}
</style>
</head>
<body>
<h1>Introduction Fixed Position in CSS</h1>
<p>Fixed is a value applied with position property. This position property is used to align the elements at desired location. This fixed position always stick to specific
location and it can't be moved any side of the page. Even we minimize or maximize the page also it's position fixed only.</p>
<p>Real Time Scenario: Let suppose if we have footer area then we also fixed this part at the bottom of the page only. If we want any element to be fixed at any position then
we go for position: fixed attribute.</p>
<p>Fixed is a value applied with position property. This position property is used to align the elements at desired location. This fixed position always stick to specific
location and it can't be moved any side of the page. Even we minimize or maximize the page also it's position fixed only.</p>
<p>Real Time Scenario: Let suppose if we have footer area then we also fixed this part at the bottom of the page only. If we want any element to be fixed at any position then
we go for position: fixed attribute.</p>
<div class="fixed-footer">
<div class="container">Footer Area. It is Fixed even scroll up or down</div>
</div>
</body>
</html>
Output:
Example #3
Image fixed position
Code:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
border: 3px solid brown;
}
.static {
top: 300px;
left: 0;
width: 100px;
height: 80%;
position: fixed;
}
p
{
color: fuchsia;
border: 2px solid red;
font-size: 20px;
}
h1
{
color: blue;
text-align: center;
}
</style>
</head>
<body>
<h1>Introduction Fixed Position in CSS</h1>
<p>Fixed is a value applied with position property. This position property is used to align the elements at desired location. This fixed position always stick to specific
location and it can't be moved any side of the page. Even we minimize or maximize the page also it's position fixed only.</p>
<p>Real Time Scenario: Let suppose if we have footer area then we also fixed this part at the bottom of the page only. If we want any element to be fixed at any position then
we go for position: fixed attribute.</p>
<div class="static">
<img src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png" alt="Aeroplane">
</div>
</body>
</html>
Output:
Conclusion
A fixed position is used to fix the element at any specific location. Once we fix the HTML element it can’t be moved even if we scroll up or scroll down the page.
Recommended Articles
This is a guide to CSS Position Fixed. Here we discuss an introduction to CSS Position Fixed, how does it work, and examples with code and output. You can also go through our other related articles to learn more –
4.5 (4,340 ratings)
View Course
