CSS Fixed
CSS Fixed
The CSS position property is very important in web design, and position: fixed is a commonly used positioning method. When an element is set to position: fixed, it is fixed in position relative to the browser window and does not move with page scrolling. This positioning method is often used to create elements such as navigation bars and floating ads.
Basic syntax
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Fixed Example</title>
<style>
.fixed {
position: fixed;
top: 0;
left: 0;
background-color: #333;
color: #fff;
padding: 10px;
width: 100%;
}
</style>
</head>
<body>
<div class="fixed">This is a fixed element</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non diam nec justo ultricies ultricies. Nullam nec justo nec nunc ultricies ultricies. Donec nec justo nec nunc ultricies ultricies.</p>
</body>
</html>
Output:
In the example above, we create an element that is fixed to the top of the page and remains in place when the page is scrolled.
Fixed to bottom
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Fixed Bottom Example</title>
<style>
.fixed-bottom {
position: fixed;
bottom: 0;
left: 0; background-color: #333;
color: #fff;
padding: 10px;
width: 100%;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non diam nec justo ultricies ultricies. Nullam nec justo nec nunc ultricies ultricies. Donec nec justo nec nunc ultricies ultricies.</p>
<div class="fixed-bottom">This is a fixed element at the bottom</div>
</body>
</html>
Output:
In this example, we create an element that is fixed to the bottom of the page and will remain in place.
Fixed to lower right corner
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Fixed Bottom Right Example</title>
<style>
.fixed-bottom-right {
position: fixed;
bottom: 0;
right: 0;
background-color: #333;
color: #fff;
padding: 10px;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non diam nec justo ultricies ultricies. Nullam nec justo nec nunc ultricies ultricies. Donec nec justo nec nunc ultricies ultricies.</p>
<div class="fixed-bottom-right">This is a fixed element at the bottom right corner</div>
</body>
</html>
Output:
In this example, we create an element that is fixed to the bottom right corner of the page and will remain in place.
Fixed to the left and scrolls with the page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Fixed Left Example</title>
<style>
.fixed-left {
position: fixed;
top: 50%;
left: 0;
transform: translateY(-50%);
background-color: #333;
color: #fff;
padding: 10px;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non diam nec justo ultricies ultricies. Nullam nec justo nec nunc ultricies ultricies. Donec nec justo nec nunc ultricies ultricies.</p>
<div class="fixed-left">This is a fixed element on the left side</div>
</body>
</html>
Output:
In this example, we create an element that is fixed to the left side of the page, but moves as the page scrolls.
Fixed to the right and scrolls with the page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Fixed Right Example</title>
<style>
.fixed-right {
position: fixed;
top: 50%;
right: 0;
transform: translateY(-50%);
background-color: #333;
color: #fff;
padding: 10px;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non diam nec justo ultricies ultricies. Nullam nec justo nec nunc ultricies ultricies. Donec nec justo nec nunc ultricies ultricies.</p>
<div class="fixed-right">This is a fixed element on the right side</div>
</body>
</html>
Output:
In this example, we create an element that is fixed to the right side of the page and moves as the page scrolls.
Fixed at specified location
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Fixed Custom Position Example</title>
<style>
.fixed-custom {
position: fixed;
top: 100px;
left: 50px;
background-color: #333;
color: #fff;
padding: 10px;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non diam nec justo ultricies ultricies. Nullam nec justo nec nunc ultricies ultricies. Donec nec justo nec nunc ultricies ultricies.</p>
<div class="fixed-custom">This is a fixed element at a custom position</div>
</body>
</html>
Output:
In this example, we create an element that is fixed at a specific position on the page.
Fixed at the specified position and scrolled with the page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Fixed Custom Position Scroll Example</title>
<style>
.fixed-custom-scroll {
position: fixed;
top: 100px;
left: 50px;
background-color: #333;
color: #fff;
padding: 10px;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non diam nec justo ultricies ultricies. Nullam nec justo nec nunc ultricies ultricies. Donec nec justo nec nunc ultricies ultricies.</p>
<div class="fixed-custom-scroll">This is a fixed element at a custom position that scrolls with the page</div>
</body>
</html>
Output:
In this example, we create an element that is fixed at a specific position on the page, but moves with the page scrolling.
Fixed at a specified position and stops when scrolling to a certain position
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Fixed Custom Position Scroll Stop Example</title>
<style>
.fixed-custom-scroll-stop {
position: fixed;
top: 100px;
left: 50px;
background-color: #333;
color: #fff;
padding: 10px;
}
</style>
<script>
window.addEventListener('scroll', function() {
var element = document.querySelector('.fixed-custom-scroll-stop');
var scrollPosition = window.scrollY;
if (scrollPosition > 200) {
element.style.position = 'absolute';
element.style.top = '200px';
} else {
element.style.position = 'fixed';
element.style.top = '100px';
}
});
</script>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non diam nec justo ultricies ultricies. Nullam nec justo nec nunc ultricies ultricies. Donec nec justo nec nunc ultricies ultricies.</p>
<div class="fixed-custom-scroll-stop">This is a fixed element at a custom position that stops scrolling after 200px</div>
</body>
</html>
Output:
In this example, we create an element that is fixed to a specific position on the page. When the page is scrolled past 200px, the element stops being fixed to the page.
Fixed at the specified position and fade out after a certain height
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Fixed Custom Position Fade Out Example</title>
<style>
.fixed-custom-fade-out {
position: fixed;
top: 100px;
left: 50px;
background-color: #333;
color: #fff;
padding: 10px;
transition: opacity 0.5s;
}
</style>
<script>
window.addEventListener('scroll', function() {
var element = document.querySelector('.fixed-custom-fade-out');
var scrollPosition = window.scrollY;
if (scrollPosition > 200) {
element.style.opacity = '0';
} else {
element.style.opacity = '1';
}
});
</script>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non diam nec justo ultricies ultricies. Nullam nec justo nec nunc ultricies ultricies. Donec nec justo nec nunc ultricies ultricies.</p>
<div class="fixed-custom-fade-out">This is a fixed element at a custom position that fades out after 200px</div>
</body>
</html>
Output:
In this example, we create an element that is fixed to a specified position on the page. When the page scrolls past 200px, the element gradually fades out.
These are some examples of using position: fixed in CSS. Through these examples, you can better understand and apply fixed positioning in web design.