CSS Position
The CSS position property controls where an element is placed on a webpage, allowing you to adjust its position relative to its normal spot, keep it fixed in one place or move it based on the viewport.
Common position Values
1. position: static;
This is the default position value for most elements. Elements with position: static; are positioned according to the normal flow of the document. The top, right, bottom, and left properties do not affect statically positioned elements.
Example:
Output:
In this example:
• position: static;: This sets the position of the element to static. By default, all elements are static, meaning they are positioned according to the normal document flow. Static elements are not affected by top, right, bottom, or left properties.
2. position: relative;
An element with position: relative; is positioned relative to its normal position in the document flow. You can use the top, right, bottom, and left properties to adjust its position from where it would normally be.
Example:
<head>
<style>
.relative-example {
position: relative;
background-color: lightblue;
padding: 10px;
margin: 10px;
top: 20px; /* Moves element down */
left: 30px; /* Moves element right */
}
</style>
</head>
<body>
<div class=”relative-example”>This element is positioned relative to its normal position.</div>
</body>
Output:
In this example:
• position: relative;: This sets the element’s position to relative. When an element is positioned relative, it is positioned relative to its normal (static) position. This means it remains in the flow of the document, but you can offset it using the top, right, bottom, or left properties.
• top: 20px;: Moves the element 20 pixels down from its normal position.
• left: 30px;: Moves the element 30 pixels to the right from its normal position.
3. position: absolute;
An element with position: absolute; is positioned relative to its nearest positioned ancestor (i.e., an ancestor with any position value other than static). If no such ancestor exists, it is positioned relative to the initial containing block (usually the viewport).
Example:
<head>
<style>
.container {
position: relative;
height: 200px;
background-color: lightgrey;
padding: 20px;
}
.absolute-example {
position: absolute;
top: 20px; /* Moves element down from the top of its positioned ancestor */
right: 30px; /* Moves element left from the right of its positioned ancestor */
background-color: lightcoral;
padding: 10px;
}
</style>
</head>
<body>
<div class=”container”>
<div class=”absolute-example”>This element is positioned absolutely within its container.</div>
</div>
</body>
Output:
In this example:
.container:
• position: relative;: This sets the container’s position to relative, making it a positioned ancestor for any absolutely positioned elements inside it. The element remains in the document flow, but other elements can be positioned relative to it.
.absolute-example:a
• position: absolute;: This sets the element’s position to absolute, meaning it is positioned relative to its closest positioned ancestor, in this case, the .container div. It is removed from the normal document flow, so it won’t affect the position of other elements.
• top: 20px;: Moves the element 20 pixels down from the top edge of its positioned ancestor (.container).
• right: 30px;: Moves the element 30 pixels left from the right edge of its positioned ancestor (.container).
4. position: fixed;
An element with position: fixed; is positioned relative to the viewport, meaning it stays in the same place even when the page is scrolled. It is unaffected by the normal document flow.
Example:
<head>
<style>
.fixed-example {
position: fixed;
bottom: 20px; /* Moves element up from the bottom of the viewport */
right: 20px; /* Moves element left from the right of the viewport */
background-color: lightgreen;
padding: 10px;
}
</style>
</head>
<body>
<div class=”fixed-example”>This element stays fixed at the bottom-right of the viewport.</div>
<p style=”height: 2000px;”>Scroll down to see the fixed position effect.</p>
</body>
Output:
In this example:
• position: fixed;: This sets the element’s position to fixed, meaning it is positioned relative to the viewport (the visible area of the browser window). The element stays fixed in place even when the page is scrolled.
• bottom: 20px;: Moves the element 20 pixels up from the bottom of the viewport.
• right: 20px;: Moves the element 20 pixels left from the right edge of the viewport.
• .fixed-example div: This is a block-level element with the class fixed-example. The element is positioned at the bottom-right corner of the viewport and stays fixed in this position, regardless of scrolling.
• <p> tag: The paragraph (<p>) tag with a height of 2000 pixels is used to create a long scrolling page, allowing you to observe the fixed position effect as you scroll.
5. position: sticky;
An element with position: sticky; switches between relative and fixed positioning depending on the user’s scroll position. It is treated as relative until it crosses a defined threshold (using top, right, bottom, or left), after which it behaves like fixed
Example:
<head>
<style>
.sticky-example {
position: sticky;
top: 0; /* Sticky when scrolled to the top of the viewport */
background-color: lightblue;
padding: 10px;
z-index: 10; /* Ensures it stays above other content */
}
.content {
height: 2000px;
background-color: lightgrey;
}
</style>
</head>
<body>
<div class=”sticky-example”>This element becomes sticky at the top of the viewport.</div>
<div class=”content”>Scroll down to see the sticky effect.</div>
</body>
Output:
Before Scroll
After Scroll
In this example:
• position: sticky;: This sets the element’s position to sticky. A sticky element toggles between relative and fixed positioning depending on the user’s scroll position. It behaves like a relatively positioned element until it reaches a specified point (in this case, top: 0), where it then sticks to that point and behaves like a fixed element.
• top: 0;: Specifies that the element should stick to the top of the viewport when you scroll down. It will remain fixed at the top until the scroll moves it out of view.
• z-index: 10;: Sets the z-index, which controls the stacking order of the element. A higher z-index value ensures that the sticky element stays above other content when overlapping occurs.
• .sticky-example div: This is a block-level element with the class sticky-example. It sticks to the top of the viewport when the user scrolls down.
• .content div: This is another block-level element with the class content. It has a large height to create a scrollable area, which allows the sticky effect of the sticky-example div to be observed.
Conclusion
The position property is fundamental for controlling the placement and layout of elements on a web page. Whether you need elements to be fixed in place, move relative to their normal position, or stay within a scrolling viewport, mastering position is key to creating effective and dynamic layouts.
Course Video
YouTube Reference :
1) CSS Opsition in Hindi/Urdu
Practice Scenarios
Scenario 1: Position static
Objective: Understand the default positioning behavior of elements.
Expected Output: Elements are positioned according to the normal document flow.
Output:
Scenario 2: Position relative
Objective: Position elements relative to their normal position.
Expected Output: Elements will be positioned relative to their original location.
Output:
Scenario 3: Position absolute
Objective: Position elements relative to their closest positioned ancestor.
Expected Output: The element will be positioned relative to its nearest positioned ancestor or to the initial containing block if none exists.
Output:
Scenario 4: Position fixed
Objective: Create a fixed element that stays in the same position on the screen even when the page is scrolled.
Expected Output: The element remains fixed in place as you scroll the page.
Output:
Scenario 5: Position sticky
Objective: Create an element that becomes fixed when you scroll past it.
Expected Output: The element initially behaves like a relative element but sticks to the top when you scroll past it.
Output:
Scenario 6: Overlapping Elements with Z-Index
Objective: Use the z-index property to control the stacking order of overlapping positioned elements.
Expected Output: The element with a higher z-index value appears in front of others.
Output:
