Wednesday, 19 February 2025

Home / Assignments / Assignments of Class 12: Positioning Elements

Assignments of Class 12: Positioning Elements

by on in

 


Assignments of Class 12: Positioning Elements

Assignment 1: Create a Static Box

Task:

Create a webpage where a box element is positioned statically (default positioning).

Step-by-Step Solution:

1.   HTML:
Write a basic HTML structure with a <div> element.

2.   CSS:
Use position: static for the box (default behavior).

3.   Expected Output:
The box appears in the normal document flow.

Code:

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Static Position</title>
  <style>
    .box {
      width: 200px;
      height: 100px;
      background-color: lightblue;
      position: static; /* Default position */
      text-align: center;
      line-height: 100px;
    }
  </style>
</head>
<body>
  <h1>Static Position Example</h1>
  <div class="box">Static Box</div>
</body>
</html>

Explanation:

  • The position: static keeps the box in the normal document flow.
  • The box does not move when top, left, right, or bottom are applied.

Assignment 2: Create a Relative Box

Task:

Create a box positioned relatively 20px down and 30px to the right.

Step-by-Step Solution:

1.   HTML:
Create a <div> element.

2.   CSS:
Use position: relative with top: 20px and left: 30px.

Code:

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Relative Position</title>
  <style>
    .box {
      width: 200px;
      height: 100px;
      background-color: lightgreen;
      position: relative;
      top: 20px; /* Moves 20px down */
      left: 30px; /* Moves 30px to the right */
      text-align: center;
      line-height: 100px;
    }
  </style>
</head>
<body>
  <h1>Relative Position Example</h1>
  <div class="box">Relative Box</div>
</body>
</html>

Explanation:

  • position: relative moves the element relative to its original position.
  • The space it occupied originally is still reserved.

Assignment 3: Create an Absolute Box Inside a Container

Task:

Create a container with a box positioned absolutely inside it.

Step-by-Step Solution:

1.   HTML:
Create a parent <div> (container) and a child <div> (box).

2.   CSS:

o    Give the container position: relative.

o    Use position: absolute for the child box.

Code:

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Absolute Position</title>
  <style>
    .container {
      width: 300px;
      height: 200px;
      background-color: lightgray;
      position: relative; /* Positioning context */
      border: 2px solid black;
    }
    .box {
      width: 100px;
      height: 50px;
      background-color: orange;
      position: absolute;
      top: 20px;
      left: 30px;
      text-align: center;
      line-height: 50px;
    }
  </style>
</head>
<body>
  <h1>Absolute Position Example</h1>
  <div class="container">
    <div class="box">Absolute Box</div>
  </div>
</body>
</html>

Explanation:

  • position: absolute positions the box relative to the nearest ancestor with position: relative.

Assignment 4: Create a Fixed Header

Task:

Create a fixed header that stays at the top while scrolling.

Code:

html
<!DOCTYPE html>
<html lang="en">
<head>                                            
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Fixed Header</title>
  <style>
    .header {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      background-color: navy;
      color: white;
      text-align: center;
      padding: 10px;
    }
    .content {
      margin-top: 60px;
      height: 1000px;
    }
  </style>
</head>
<body>
  <div class="header">Fixed Header</div>
  <div class="content">
    <p>Scroll down to see the fixed header.</p>
  </div>
</body>
</html>

Explanation:

  • position: fixed keeps the header at the top of the viewport even when scrolling.

Assignment 5: Create a Sticky Header

Task:

Create a sticky header that "sticks" at the top when scrolled.

Code:

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sticky Header</title>
  <style>
    .header {
      position: sticky;
      top: 0;
      background-color: tomato;
      color: white;
      text-align: center;
      padding: 10px;
    }
    .content {
      height: 1500px;
    }
  </style>
</head>
<body>
  <div class="header">Sticky Header</div>
  <div class="content">
    <p>Scroll down to see the sticky header effect.</p>
  </div>
</body>
</html>

Assignment 6: Position Two Boxes (Relative and Absolute)

  • Create two boxes:
    • One with position: relative.
    • One with position: absolute.

Assignment 7: Fixed Sidebar

  • Create a sidebar that stays fixed on the left side of the viewport.

Assignment 8: Sticky Footer

  • Create a sticky footer that "sticks" to the bottom when the page scrolls.

Assignment 9: Multiple Absolute Boxes

  • Create a container with multiple absolutely positioned boxes at different locations.

Assignment 10: Layering with Z-Index

  • Create three boxes with:
    • position: absolute.
    • Use z-index to overlap them.

Sample Code:

html
<style>
  .box1, .box2, .box3 {
    width: 100px;
    height: 100px;
    position: absolute;
  }
  .box1 {
    background: red;
    top: 50px;
    left: 50px;
    z-index: 1;
  }
  .box2 {
    background: green;
    top: 70px;
    left: 70px;
    z-index: 2;
  }
  .box3 {
    background: blue;
    top: 90px;
    left: 90px;
    z-index: 0;
  }
</style>
<div class="box1">Box 1</div>
<div class="box2">Box 2</div>
<div class="box3">Box 3</div>

These assignments will help students understand position and how to use it effectively in different contexts. Each task progressively introduces new concepts and real-world use cases.

You said:

Give all code properly

ChatGPT said:

ChatGPT

Here are 10 detailed assignments with properly formatted code, explanations, and outputs for each concept of CSS Positioning.

Assignment 1: Create a Static Box

Task:

Create a box positioned statically (default positioning).

Code:

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Static Position</title>
  <style>
    .box {
      width: 200px;
      height: 100px;
      background-color: lightblue;
      position: static; /* Default position */
      text-align: center;
      line-height: 100px;
      border: 2px solid black;
    }
  </style>
</head>
<body>
  <h1>Static Position Example</h1>
  <div class="box">Static Box</div>
</body>
</html>

Explanation:

  • The position: static is the default positioning of an element in CSS.
  • The box appears in the normal document flow.

Assignment 2: Create a Relative Box

Task:

Create a box positioned relatively 20px down and 30px to the right.

Code:

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Relative Position</title>
  <style>
    .box {
      width: 200px;
      height: 100px;
      background-color: lightgreen;
      position: relative; /* Relative positioning */
      top: 20px; /* Move 20px down */
      left: 30px; /* Move 30px to the right */
      text-align: center;
      line-height: 100px;
      border: 2px solid black;
    }
  </style>
</head>
<body>
  <h1>Relative Position Example</h1>
  <div class="box">Relative Box</div>
</body>
</html>

Explanation:

  • position: relative moves the element relative to its original position.
  • The element shifts 20px downward and 30px to the right.

Assignment 3: Create an Absolute Box Inside a Container

Task:

Create a container with a box positioned absolutely inside it.

Code:

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Absolute Position</title>
  <style>
    .container {
      width: 300px;
      height: 200px;
      background-color: lightgray;
      position: relative; /* Positioning context */
      border: 2px solid black;
    }
    .box {
      width: 100px;
      height: 50px;
      background-color: orange;
      position: absolute;
      top: 20px; /* Position inside the container */
      left: 30px;
      text-align: center;
      line-height: 50px;
    }
  </style>
</head>
<body>
  <h1>Absolute Position Example</h1>
  <div class="container">
    <div class="box">Absolute Box</div>
  </div>
</body>
</html>

Explanation:

  • position: absolute positions the box relative to the nearest ancestor with position: relative.

Assignment 4: Fixed Header

Task:

Create a fixed header that stays at the top while scrolling.

Code:

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Fixed Header</title>
  <style>
    .header {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      background-color: navy;
      color: white;
      text-align: center;
      padding: 10px;
    }
    .content {
      margin-top: 60px;
      height: 1000px;
    }
  </style>
</head>
<body>
  <div class="header">Fixed Header</div>
  <div class="content">
    <p>Scroll down to see the fixed header.</p>
  </div>
</body>
</html>

Explanation:

  • position: fixed keeps the header at the top of the page while scrolling.

Assignment 5: Sticky Header

Task:

Create a sticky header that sticks to the top when scrolling.

Code:

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sticky Header</title>
  <style>
    .header {
      position: sticky;
      top: 0;
      background-color: tomato;
      color: white;
      text-align: center;
      padding: 10px;
    }
    .content {
      height: 1500px;
    }
  </style>
</head>
<body>
  <div class="header">Sticky Header</div>
  <div class="content">
    <p>Scroll down to see the sticky header effect.</p>
  </div>
</body>
</html>

Explanation:

  • position: sticky keeps the header at the top until its container is scrolled out of view.

Assignment 6: Fixed Sidebar

Task:

Create a fixed sidebar that stays on the left side while scrolling.

Code:

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Fixed Sidebar</title>
  <style>
    .sidebar {
      position: fixed;
      top: 0;
      left: 0;
      width: 200px;
      height: 100%;
      background-color: darkgray;
      color: white;
      padding: 10px;
    }
    .content {
      margin-left: 220px;
      padding: 20px;
      height: 1000px;
    }
  </style>
</head>
<body>
  <div class="sidebar">Fixed Sidebar</div>
  <div class="content">
    <p>Scroll down to see the fixed sidebar.</p>
  </div>
</body>
</html>

Assignment 7: Sticky Footer

Task:

Create a sticky footer that remains at the bottom.

Code:

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sticky Footer</title>
  <style>
    body {
      margin: 0;
      display: flex;
      flex-direction: column;
      min-height: 100vh;
    }
    .content {
      flex: 1;
    }
    .footer {
      background-color: darkblue;
      color: white;
      text-align: center;
      padding: 10px;
      position: sticky;
      bottom: 0;
    }
  </style>
</head>
<body>
  <div class="content">
    <p>Scroll to see the sticky footer.</p>
  </div>
  <div class="footer">Sticky Footer</div>
</body>
</html>

Assignment 8: Z-Index Layering

Task:

Create overlapping boxes using z-index.

Code:

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Z-Index</title>
  <style>
    .box {
      width: 100px;
      height: 100px;
      position: absolute;
    }
    .box1 { background: red; top: 50px; left: 50px; z-index: 3; }
    .box2 { background: green; top: 70px; left: 70px; z-index: 2; }
    .box3 { background: blue; top: 90px; left: 90px; z-index: 1; }
  </style>
</head>
<body>
  <div class="box box1">Box 1</div>
  <div class="box box2">Box 2</div>
  <div class="box box3">Box 3</div>
</body>
</html>

By at
Tags

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)

Search This Blog
Powered by Blogger.