Course: CSS

Welcome to the CSS Z-index Quiz.

This quiz tests your understanding of z-index in CSS, which is used to control the vertical stacking order of elements on a webpage. When elements overlap, the z-index property determines which element appears in front and which one stays behind. It works with positioned elements such as those using position: relative, absolute, fixed, or sticky. Understanding z-index is essential for designing layouts that involve overlapping elements like modals, dropdowns, tooltips, and layered components. Read the instructions carefully before you begin the quiz.

Quiz Format

• Total Questions: 10

• Difficulty Level: Medium

• Question Type: Multiple Choice

• Each question has one correct answer.

Timing

• Total time limit: 5 minutes

• Answer steadily and avoid spending too much time on any single question.

Scoring

• Each correct answer = +1 point

• No negative marking

• Maximum Score = 10 points

How to Play

• Read each question carefully and review the CSS and HTML code examples provided.

• Understand how the z-index property works.

• Learn how stacking order is affected by position values.

• Focus on how higher z-index values appear above lower ones.

• Observe how overlapping elements are displayed.

• Identify correct and incorrect z-index usage.

• Pay attention to stacking contexts.

• Understand common mistakes when using z-index.

• Choose the option that best represents correct CSS layering behavior.

• Once you move to the next question, you cannot return to previous ones.

Rules

• Do not refresh or close the quiz window during the attempt.

• Avoid using notes, books, or online references.

• Keep track of the remaining time during the quiz.

Before You Start

• You can revise the topic here: CSS Z-index Tutorial

After Submission

• Your score will be displayed instantly.

• Review the correct answers to understand mistakes.

• This will help you confidently use z-index in CSS layouts.