Practice Problems

Create a new HTML file for each problem, applying the specified positioning techniques.

Problem 1: Relative & Absolute

File Name: problem1.html
Create a container <div> with position: relative; and a fixed height.
Place an absolutely positioned child <div> inside at, say, top: 30px; left: 50px;.
Add a short text explaining how absolute positioning is dependent on the container’s positioning context.

Problem 2: Fixed Header or Footer

File Name: problem2.html
Make a fixed header at the top of the page with a small nav (3–4 links).
Ensure the main content scrolls underneath, while the header stays in place.
Add a note about how z-index might be used if the header needs to overlap the main content.

Problem 3: Overlapping Elements with Z-Index

File Name: problem3.html
Create two overlapping <div> elements:
- One with position: absolute; top: 100px; left: 100px; z-index: 1;
- Another overlapping one with position: absolute; top: 120px; left: 120px; z-index: 2;
Observe how the element with the higher z-index appears on top.
Experiment by flipping the z-index values to see how it changes the stacking order.

Advanced Problems

Problem 4: Modal Popup with Overlay

File Name: problem4.html

Instructions:

HTML Structure:
- Create a standard HTML document with some placeholder content (e.g., headings and paragraphs).
- Add a button labeled “Open Modal” somewhere in the content (the button need not function via JavaScript for this exercise).
Modal Overlay & Box:
- Create a full-page overlay <div> that covers the entire viewport.
  - Use position: fixed; with top: 0; left: 0; width: 100%; height: 100%; and a semi-transparent background (e.g., background-color: rgba(0,0,0,0.5);).
- Inside the overlay, add another <div> that serves as the modal box.
  - Use position: absolute; to center the modal box (e.g., using top: 50%; left: 50%; transform: translate(-50%, -50%);).
  - Include a heading and some descriptive text inside the modal.
  - Optionally, add a “Close” button (its functionality isn’t required for this exercise).
Z-Index Usage:
- Ensure the overlay and modal have appropriate z-index values so that they appear above the page content.

Objective:

Practice combining fixed and absolute positioning with z-index to create a modal overlay that sits on top of all other content.

Problem 5: Floating Call-to-Action Button

File Name: problem5.html

Instructions:

HTML Structure:
- Create a standard HTML document with enough content (e.g., several paragraphs) so that the page scrolls.
- Add a button element with text like “Contact Us” or “Back to Top” positioned in the document.
CSS Styling:
- Style the button with position: fixed; to anchor it to the bottom-right corner of the viewport (e.g., bottom: 20px; right: 20px;).
- Assign a high z-index (e.g., z-index: 1000;) to ensure it remains visible above other elements.
- Add additional styling (padding, background color, border-radius, etc.) to make the button visually distinct.
Behavior Observation:
- Scroll the page to observe that the button remains fixed in place.

Objective:

Demonstrate how fixed positioning is used to keep interactive elements visible at all times, regardless of scrolling, and practice controlling the stacking order with z-index.

Problem 6: Multi-Layered Layout with Mixed Positioning

File Name: problem6.html

Instructions:

HTML Structure:
- Create a standard HTML document that includes a header, a main content area, and a footer.
- In the header, add a static title and a navigation bar.
- In the main content area, include a container <div> that holds a content block and a “badge” element (for example, a “New” label).
- In the footer, add some placeholder text.
CSS Styling Requirements:
- Header (Static):
  - Let the header use default (static) positioning.
- Navigation Bar (Relative):
  - Within the header, position the navigation bar with position: relative; and offset it slightly using top/left properties.
- Content Container (Relative):
  - Set the container <div> to position: relative;.
- Badge Element (Absolute):
  - Inside the container, place a badge <div> with position: absolute; positioned in the top-right corner of the container (e.g., top: 10px; right: 10px;).
  - Ensure the badge has a higher z-index than the container content so it appears on top.
- Footer (Fixed):
  - Use position: fixed; for the footer to anchor it at the bottom of the viewport (e.g., bottom: 0; left: 0; width: 100%;) and assign an appropriate z-index if needed.
Observation & Comments:
- Add comments or a short paragraph explaining how each positioning method affects the layout and stacking of elements.

Objective:

Integrate multiple positioning techniques within a single layout. This exercise helps you understand how static, relative, absolute, and fixed positioning interact, and how z-index ensures the correct stacking order among overlapping elements.

CSS Positioning—Static, Relative, Absolute, and Fixed