FAQ accordion

Table of contents

• Overview
  • Screenshot and live site URL
• My process
  • What I learned
• Author
• Inspired by

Overview

Screenshot and live site URL

Desktop	Mobile

Live Site URL

My process

What I learned

1. Using Negative Margins for Vertical Positioning
   I encountered this technique while trying to vertically overlap the FAQ box on top of the header background. My initial approach was to use position: absolute on the FAQ box. However, since it was the only content inside <main>, this caused the main section to collapse—losing its background color and bottom spacing.
   To solve this, I needed the FAQ box to remain part of the normal document flow so that <main> could retain its layout and styling, while still visually overlapping the header. Applying a negative top margin to the FAQ box achieved exactly that: it preserved the flow and allowed the visual overlap.
   In other scenarios—where the parent container doesn’t rely on the child’s presence for layout—position: absolute can still be a valid and clean solution.

Author

• Github - @AminForouzan
• Frontend Mentor - @AminForouzan

Inspired by

• FAQ accordion challenge on Frontend Mentor.