NS
Guest Mode:

BCA Student Stories & UpdatesLive

Live GitHub Pages
You
Your StorySign in & share
Er. Manoj Kumar
D5
Er. ManojActive nowPages
Day 13CSS Layouts2 Hours Practical
Push to GitHub to Complete

CSS Positioning: Static, Relative, Absolute & Fixed

CSS Positioning takes elements out of their natural document flow and pins them to coordinate offsets relative to parents, viewports, or ancestor bounds.

Interactive Learning Roadmap

Day 13 Step-by-Step Practical Flow

🎯1. What You Will Learn Today

✔Understand normal document flow and default `position: static`.
✔Use `position: relative` as an offset reference and coordinate anchor.
✔Use `position: absolute` with top/right/bottom/left to overlay badges and popups.
✔Use `position: fixed` to stick navigation bars or announcement headers to the viewport.
Day 13 MasterclassCSS Layouts

CSS Positioning: Static, Relative, Absolute & Fixed — Comprehensive Practical Guide

Har concept ko visual mental models, code anatomy aur practical industry tips ke sath samjhein.

Real-World Purpose Aur Zaroorat

CSS Positioning takes elements out of their natural document flow and pins them to coordinate offsets relative to parents, viewports, or ancestor bounds.

static: Default flow. top, right, bottom, left properties have NO effect.
relative: Element is offset relative to its own normal position without disrupting neighboring flow.
absolute: Element is removed from normal flow and positioned relative to its closest non-static ancestor (usually a position: relative parent).
fixed: Element is pinned relative to the browser viewport window and stays fixed during scrolling.
z-index: Controls stacking order on the 3D depth axis (higher number stacks on top).
Dimaag Mein Bithane Ka Model

"Relative is like claiming your chair in a room. Absolute is sticking a sticky note on the corner of that chair. Fixed is taping a sticker directly onto the camera lens."

💡 Pro Tip: Code ko ratta mat maaro; imagine karo ki browser har tag ko visually kaise draw karta hai.

👨‍🏫3. Teacher Demonstration Code

Parent uses position: relative; Badge uses position: absolute.

Card with Floating Top-Right Badgehtml
<style>
  .course-card {
    position: relative;
    width: 320px;
    padding: 24px;
    background: #ffffff;
    border: 2px solid #000000;
    border-radius: 16px;
  }
  .pro-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: #2563eb;
    color: #ffffff;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: bold;
    border-radius: 8px;
  }
</style>
<div class="course-card">
  <span class="pro-badge">FEATURED</span>
  <h3>BCA Practical Lab</h3>
  <p>Hands-on industry coding system.</p>
</div>

2. Hands-On Practical Lab: Follow Instructions in VS Code

Code like a professional software engineer! Follow the step-by-step instructions below in Visual Studio Code (VS Code) on your PC, test your output locally, and push to GitHub.

2 Coding Tasks
Interactive Coding TestAuto-Evaluates as you type

Day 13 Practical Task Test Studio

Test Score:0 / 2 Passed
1. Practical Task Specifications & Live Test Checklist:Type code below to pass tests
Task 1Anchor Parent with position: relative

Add `position: relative;` to .card-container.

⏳ WAITING
Task 2Float Badge with position: absolute

Add `position: absolute;`, `top: 10px;`, and `right: 10px;` to .card-badge.

⏳ WAITING
2. Type HTML & CSS Code:index.html
index.html
⚡ Real-Time Testing Active
Tab inserts 2 spaces • Live DOM refresh459 chars
Live Browser Output:
🔒 http://localhost:5500/index.html
Live
Renders live HTML & CSS typed on the left.
Interactive Bug Detective

Spot the Bug: Absolute Child Escaping Outside Container

Tap or click on the exact line below that contains the error:

Click any code line
⚠️ Broken Code Inspector
Tap buggy line
1
.card-wrapper {
2
/* Missing position: relative on container! */
3
width: 400px;
4
}
5
.close-btn {
6
position: absolute;
7
top: 10px;
8
right: 10px;
9
/* Button shoots to the top-right corner of the whole screen! */
10
}
Stuck? Need a detective clue before checking the solution?

Senior Developer Forensic Analysis:

An absolute child looks for the nearest positioned ancestor. If no parent has position: relative/absolute, it positions relative to the <body> tag!

Golden Rule: Always validate code syntax and security attributes before pushing to GitHub!

📝Independent Practice: Assignment

📄 modal-overlay.html

Homework Task: Pinned Bottom Notification Bar

  • •Create folder `day-13` with `index.html`.
  • •Build a long scrolling page with several dummy paragraphs.
  • •Create a bottom announcement bar styled with `position: fixed; bottom: 0; left: 0; width: 100%;`.
  • •Add a high `z-index: 100` so it stays floating above all scrolling page content.
Submission Evaluation Criteria: Scroll the webpage in Chrome to verify the bottom bar never moves or disappears.
Exact Assignment Solution Code: modal-overlay.html

Open Visual Studio Code on your PC (code .), create modal-overlay.html, paste this complete step-by-step verified code, test in your browser, and push to your GitHub repo:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>BCA Day 13 - CSS Positioning & Modal Dialog</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: 'Segoe UI', Tahoma, sans-serif;
      background: #0f172a;
      color: white;
      padding: 32px;
      min-height: 200vh; /* demonstrate sticky/fixed behavior */
    }
    /* Fixed trigger button at bottom right */
    .floating-help-btn {
      position: fixed;
      bottom: 24px;
      right: 24px;
      padding: 12px 20px;
      border-radius: 50px;
      background: #2563eb;
      color: white;
      border: none;
      font-weight: bold;
      cursor: pointer;
      box-shadow: 0 4px 14px rgba(37, 99, 235, 0.4);
      z-index: 10;
    }
    /* Fixed Modal Backdrop Overlay */
    .modal-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.75);
      backdrop-filter: blur(4px);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 50;
    }
    /* Modal Card with Relative Position for Absolute Close Button */
    .modal-card {
      position: relative;
      background: #1e293b;
      border: 1px solid #334155;
      padding: 28px;
      border-radius: 16px;
      max-width: 440px;
      width: 90%;
      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
    }
    .modal-close-btn {
      position: absolute;
      top: 14px;
      right: 14px;
      background: #334155;
      border: none;
      color: white;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      cursor: pointer;
      font-weight: bold;
    }
    .modal-card h2 { font-size: 18px; color: #38bdf8; margin-bottom: 8px; }
    .modal-card p { font-size: 13px; color: #cbd5e1; line-height: 1.5; margin-bottom: 16px; }
    .btn-action {
      width: 100%;
      padding: 10px;
      background: #2563eb;
      border: none;
      border-radius: 8px;
      color: white;
      font-weight: bold;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <h1>CSS Positioning: Static, Relative, Absolute, Fixed</h1>
  <p style="color: #94a3b8; margin-top: 8px;">Scroll down to verify the floating button stays anchored to the viewport.</p>

  <!-- Modal Dialog -->
  <div class="modal-backdrop">
    <div class="modal-card">
      <button class="modal-close-btn" onclick="alert('Close clicked')">✕</button>
      <h2>BCA Practical Viva Verification</h2>
      <p>Demonstrating position: fixed (modal backdrop covering 100vw/100vh) and position: absolute (close button pinned to top-right).</p>
      <button class="btn-action" onclick="alert('Submission Approved!')">Confirm Submission</button>
    </div>
  </div>

  <button class="floating-help-btn" onclick="alert('Help desk active')">💬 Ask Mentor</button>
</body>
</html>
Verified Assignment Code Solution (100% Tested & Ready to Run)

🎓4. Viva Check: Mandatory Conceptual Test

Why must a parent container have `position: relative` when placing an `absolute` child inside it?

5. Mandatory Step: Push to GitHub to Unlock Next Lesson

Target Repo: html-css-projects

Windows 11 Terminal / VS Code
1$
mkdir day-13
Create a new project folder (day-13)
2$
cd day-13
Change working directory to day-13
3$
git add .
Stage all modified files and new assets for commit
4$
git commit -m "Day 13: CSS positioning coordinate systems, absolute badges and fixed bars"
Commit staged changes with a descriptive message
5$
git push origin main
Push local commits directly to your remote GitHub repository
⌨️ Paste into terminal:Ctrl + V✨ Word wrap active (no horizontal cutoff)
Completion Prerequisites VerificationIncomplete Steps
Google Login
✔ Required
VS Code Implementation
Step 4 Viva Check
Own GitHub Project
Required

Exact GitHub Setup Guide & Expected Structure

Day 13 Requirements

Follow these exact folder and file names to prevent verification errors.

1. GitHub Repository
html-css-projects
Must be set to Public
2. Exact FolderNEW
day-13/ or bca-day-13/
Create inside repo root
3. Exact File NameREQUIRED
index.html
⚠️ No spaces or custom names
4. What to Submit Below
https://github.com/YOU/html-css-projects
Or direct link to index.html
Terminal Commands to Create & Push Day 13
1$
# 1. Enter your repository directory
2$
cd html-css-projects
Change working directory to html-css-projects
3$
# 2. Create the exact folder for Day 13
4$
mkdir day-13
Create a new project folder (day-13)
5$
cd day-13
Change working directory to day-13
6$
# 3. Create your code file: index.html
7$
# (Write your Day 13 homework code inside index.html)
8$
# 4. Save, stage, commit and push to GitHub:
9$
git add .
Stage all modified files and new assets for commit
10$
git commit -m "Day 13: CSS Positioning: Static, Relative, Absolute & Fixed"
Commit staged changes with a descriptive message
11$
git push origin main
Push local commits directly to your remote GitHub repository
⌨️ Paste into terminal:Ctrl + V✨ Word wrap active (no horizontal cutoff)
How to Avoid "Could not find your practical code file" Errors:
1.Use Lowercase index.html: Avoid spaces or custom names like Alan Turing..html or Index.HTML. Linux/GitHub servers are strictly case-sensitive.
2.Separate Day Folders: Create a new folder day-13/ for today so you don't overwrite previous days.
3.Ensure Public Visibility: If your GitHub repo is Private, automated validation cannot inspect your code. Set it to Public.
4.Check on GitHub Website: Before clicking "Verify", open your repo in Google Chrome to confirm your files were pushed to branch main.
📁 github.com/YOUR_USERNAME/html-css-projects
Branch: main
README.md# BCA Practical Portfolio overview
day-01/Day 1 Prior Lesson
└──index.html
day-02/Day 2 Prior Lesson
└──index.html
day-03/Day 3 Prior Lesson
└──index.html
day-04/Day 4 Prior Lesson
└──index.html
day-05/Day 5 Prior Lesson
└──index.html
day-06/Day 6 Prior Lesson
└──index.html
day-07/Day 7 Prior Lesson
└──index.html
day-08/Day 8 Prior Lesson
└──index.html
day-09/Day 9 Prior Lesson
└──index.html
day-10/Day 10 Prior Lesson
└──index.html
└──styles.css
day-11/Day 11 Prior Lesson
└──index.html
day-12/Day 12 Prior Lesson
└──index.html
day-13/✨ CREATE THIS FOLDER FOR TODAY (Day 13)
└──index.htmlMust contain: position: relative, position: absolute, position: sticky, z-index
Sequential Progression Enforced

You are welcome to read all notes, inspect code snippets, and practice all exercises of Day 13 freely! To officially submit your GitHub repository and unlock subsequent days in your portfolio, please complete Day 12: CSS Display Property: Block, Inline, Inline-Block & None first.

Complete Day 12 First
Day 12: CSS Display Property: Block, Inline, Inline-Block & None
WhatsApp
Curriculum & Practical Systems Authored by Er. Manoj Kumar
NextSem Academy • BCA Practical Learning Portal