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.

Assignment Submission

After completing these exercises, call Mike over for feedback on your newly created HTML and CSS solutions.

Advance 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.

Day 6: CSS Positioning—Static, Relative, Absolute, and Fixed