Module 8 : CSS Display & Positioning – Static, Relative, Absolute, Fixed, and Sticky Positioning
Introduction to CSS Display & Positioning
In CSS (Cascading Style Sheets), positioning elements and defining how they appear on a webpage is a fundamental concept. The positioning determines how elements are placed in relation to their parent containers or the viewport. Additionally, the display property defines how elements will appear (block, inline, flex, etc.).
This module will cover the following:
Display property and its types
Positioning elements (static, relative, absolute, fixed, sticky)
Practical examples with code and detailed explanation
Lab experiments for better understanding
1. Understanding the Display Property in CSS
The display property defines how elements are rendered on the web page. Here are some common values:
1.1 Block
Elements take up the full width available.
Starts on a new line.
Examples: <div>, <p>, <h1> to <h6>
Example:
<div style="display: block; background-color: lightblue;">
This is a block element.
</div>
1.2 Inline
Elements do not start on a new line.
Width and height cannot be controlled.
Examples: <span>, <a>, <strong>
Example:
<span style="display: inline; background-color: yellow;">
This is an inline element.
</span>
1.3 Inline-Block
Acts like an inline element but allows width and height control like a block element.
Example:
<div style="display: inline-block; width: 100px; height: 100px; background-color: pink;">
This is an inline-block element.
</div>
1.4 None
Completely hides the element from the document flow.
Example:
<div style="display: none;">
This content is hidden.
</div>
2. Understanding CSS Positioning
The position property in CSS allows you to define how an element is positioned in the document flow.
2.1 Static Position (Default Positioning)
This is the default position of any element.
Elements are placed according to the normal document flow.
No special behavior.
Example:
<div style="position: static; background-color: lightgreen;">
This is a static positioned element.
</div>
Explanation:
The element will appear as it normally would without any special positioning.
2.2 Relative Positioning
The element is positioned relative to its normal position.
It will still occupy space in the document flow, but can be shifted using top, left, right, bottom.
Example:
<div style="position: relative; top: 20px; left: 30px; background-color: lightcoral;">
This is a relatively positioned element.
</div>
Explanation:
This element is moved 20px down and 30px right from its original position.
Space from the original position is still preserved.
Lab Exercise:
Create a box with relative positioning.
Shift the box using top, left values and observe the behavior.
2.3 Absolute Positioning
The element is completely removed from the document flow.
It is positioned relative to the nearest positioned ancestor (non-static).
If no ancestor has a position set, it uses the <html> element (browser window).
Example:
<div style="position: relative;">
<div style="position: absolute; top: 10px; left: 20px; background-color: lightyellow;">
This is an absolutely positioned element.
</div>
</div>
Explanation:
The inner box is positioned relative to its parent because the parent has position: relative.
If the parent had no position set, the inner box would move relative to the entire page.
Lab Exercise:
Create a parent container with position: relative.
Place a child element with position: absolute.
Observe the behavior of the child element when the parent moves.
2.4 Fixed Positioning
The element is removed from the document flow.
It is positioned relative to the browser window.
It does not move when the page is scrolled.
Example:
<div style="position: fixed; top: 0; left: 0; width: 100%; background-color: lightgray;">
This is a fixed header.
</div>
Explanation:
This element acts like a fixed navigation bar and remains visible while scrolling.
Lab Exercise:
Create a fixed navigation bar.
Scroll the page and observe the fixed behavior.
2.5 Sticky Positioning
The element toggles between relative and fixed depending on the user's scroll position.
When the user scrolls past a certain point, the element becomes fixed.
Example:
<div style="position: sticky; top: 0; background-color: lightblue;">
This is a sticky header.
</div>
Explanation:
The element behaves like relative until the user scrolls past it, then it sticks to the top.
Lab Exercise:
Create a sticky header.
Add enough content to enable scrolling.
Observe the sticky behavior.
3. Quick Comparison Table
Position Type Document Flow Moves With Scroll Space Occupied
Positioned Relative To
Static Yes Yes Yes Normal document flow
Relative Yes Yes Yes Its normal position
Absolute No No No Nearest positioned ancestor
Fixed No No No Browser window
Sticky Yes (until scrolled) No (after scroll) Yes (before fixed) Nearest scrollable ancestor
4. Lab Experiments
Experiment 1: Create a Floating Navigation Bar
Create a navigation bar with position: fixed.
Add content below and observe its behavior during scroll.
Code:
<nav style="position: fixed; top: 0; width: 100%; background-color: #333; color: white;">
Fixed Navbar
</nav>
Experiment 2: Sticky Section Headers
Create section headers with position: sticky.
Add content and test scrolling behavior.
Code:
<div style="position: sticky; top: 0; background-color: yellow;">
Sticky Header
</div>
Experiment 3: Absolute and Relative
Create a parent container with position: relative.
Place a child inside with position: absolute.
Code:
<div style="position: relative; height: 200px;">
<div style="position: absolute; bottom: 0; right: 0;">
Bottom-right box
</div>
</div>
5. Summary
Static: Default behavior, no special positioning.
Relative: Moves relative to its normal position.
Absolute: Moves relative to the nearest positioned ancestor.
Fixed: Stays fixed on the viewport.
Sticky: Acts like relative until scrolled, then behaves like fixed.
✅ Assignment
📄
Task 1: Build a fixed navigation bar with scrolling content.
Task 2: Design a sticky section header that sticks after scrolling.
Task 3: Create a card with a parent (relative) and child (absolute) element.
No comments:
Post a Comment