CSS Fixed and Absolute Position
absolute takes an element out of flow and places it against its nearest positioned ancestor, while fixed pins it to the viewport so it stays put while the page scrolls.
Both absolute and fixed remove an element from normal document flow, meaning other elements act as if it were not there. They differ in what they are positioned against.
position: absolute
An absolute element is placed using its offsets relative to the nearest ancestor that has a position other than static. If no such ancestor exists, it falls back to the page itself. This is why a relative parent is so often paired with an absolute child.
Corner badge
<!DOCTYPE html>
<html>
<head>
<style>
.card {
position: relative;
}
.card .badge {
position: absolute;
top: 10px;
right: 10px;
}
</style>
</head>
<body>
<div class="card">
<p>Wireless headphones</p>
<span class="badge">New</span>
</div>
</body>
</html>position: fixed
A fixed element is positioned against the viewport, so it does not move when the user scrolls. This makes it ideal for a persistent header, a back-to-top button, or a cookie banner.
Sticky page header
<!DOCTYPE html>
<html>
<head>
<style>
.site-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
</style>
</head>
<body>
<header class="site-header">
<nav>
<a href="#home">Home</a>
<a href="#about">About</a>
</nav>
</header>
</body>
</html>
