CSS Tutorial
Introduction
CSS Properties
CSS Designing
CSS Advance Topics
CSS FAQs
CSS Positioning
In web design, controlling where your elements appear on the page is crucial. CSS provides a powerful way to position elements exactly where you want them.
Using the position property in CSS, you can change how elements behave within their containers and how they interact with others around them.
Let’s go through the different position values one by one.
Static (Default Position)
By default, every element on a webpage follows the natural document flow — top to bottom, left to right. This is called static positioning.
You usually don’t need to set this manually, as it’s the default.
Syntax:
selector {
position: static;
}
Example:
<head>
<style>
.logo {
position: static;
}
</style>
</head>
<body>
<p>Welcome to Learn With Arshyan!</p>
<p>Explore CSS in depth.</p>
<img decoding="async" class="logo" src="logo.png" alt="Site Logo">
<p>Start your journey today.</p>
<p>Stay consistent and keep learning!</p>
</body>
This example shows that the image stays in the regular flow with no special positioning.
Relative
With relative positioning, elements are placed based on their original position, but you can move them using top, left, right, or bottom.
It’s still part of the normal flow, so the space it originally occupied is preserved.
Syntax:
selector {
position: relative;
top: 30px;
left: 50px;
}
Example:
<head>
<style>
.logo {
position: relative;
left: 80px;
top: 40px;
}
</style>
</head>
<body>
<p>Learn With Arshyan - CSS Positioning</p>
<img decoding="async" class="logo" src="logo.png" alt="Logo">
<p>This image has been shifted from its default spot.</p>
</body>
Notice: Even though the image is moved, its original space is not taken by any other element.
Absolute
An element with absolute positioning is placed relative to its nearest ancestor that has a position value other than static.
If there’s no such parent, it will position itself relative to the <html> element (i.e., the whole page).
Also, it is removed from the normal flow of the document.
Example:
<head>
<style>
.container {
position: relative;
}
.badge {
position: absolute;
top: 10px;
right: 10px;
}
</style>
</head>
<body>
<div class="container">
<h2>Learn With Arshyan</h2>
<p>Welcome to your CSS journey.</p>
<img decoding="async" class="badge" src="logo.png" alt="Badge">
</div>
</body>
Here, the .badge image is positioned inside .container at the top-right corner, independent of the text layout.
Fixed
A fixed element is anchored to the screen itself, not to any container. It stays in place even when you scroll the page.
Perfect for sticky headers, footers, or floating buttons.
Example:
<head>
<style>
header {
position: fixed;
top: 0;
right: 20px;
background: #fff;
}
</style>
</head>
<body>
<header>
<h1>Learn With Arshyan</h1>
</header>
</body>
Now the header will remain at the top-right corner even if the page scrolls.
Float (Brief Overview)
While not part of the position family, the float property allows elements to shift to the left or right within a container.
It’s often used for wrapping text around images. For more on this, see the CSS Float lesson.
Sticky
The sticky value is a smart mix between relative and fixed. The element behaves like relative until a defined scroll position is reached, at which point it becomes fixed.
Example:
<head>
<style>
h2 {
position: sticky;
top: 0;
background-color: #fff;
}
</style>
</head>
<body>
<h2>Sticky Heading</h2>
<p>Scroll down to see this heading stick at the top.</p>
</body>