Common layering issues in CSS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does the CSS z-index property control?

The z-index property controls the stack order of elements along the z-axis (front to back). Higher values appear on top of lower values.

intermediate

What is a stacking context in CSS?

A stacking context is a group of elements that share the same stacking order rules. It acts like a mini-layer system inside the page, isolating elements from others outside it.

intermediate

Why might an element with a higher z-index appear behind another element?

Because it might be inside a different stacking context with a lower parent z-index, or the element's position property is not set to create stacking context properly.

beginner

How does the CSS position property affect layering?

Only elements with position set to relative, absolute, fixed, or sticky can have a z-index that affects layering.

beginner

What common mistake causes layering issues with dropdown menus or modals?

Not setting position and z-index properly on dropdowns or modals, or having parent containers with overflow: hidden that clip the element.

Which CSS property must be set for z-index to work?

A padding

B position

C margin

D display

The position property must be set to relative, absolute, fixed, or sticky for z-index to take effect.

What is a stacking context?

A A group of elements with shared layering rules

B A CSS property for colors

C A type of HTML tag

D A JavaScript function

A stacking context is a set of elements that follow the same layering rules, isolating their z-index from elements outside.

Why might a dropdown menu be hidden behind other content?

A The menu has no text

B The menu uses <code>display: block</code>

C Parent container has <code>overflow: hidden</code>

D The page has no CSS

When a parent container has overflow: hidden, it can clip child elements like dropdowns, hiding them behind other content.

Which z-index value appears on top?

A -1

B 5

C 0

D 10

Higher z-index values appear on top of lower ones.

If two elements have the same z-index, which one appears on top?

A The one later in the HTML code

B The one earlier in the HTML code

C The one with smaller font size

D The one with more padding

When z-index is equal, the element that comes later in the HTML code appears on top.

Explain what causes layering issues in CSS and how stacking contexts affect element visibility.

Think about how elements are grouped and ordered in layers.

Describe how to fix a dropdown menu that appears behind other page content.

Consider both the dropdown and its container styles.

Practice

1. Which CSS property controls the stacking order of elements on a webpage?

easy

A. float

B. position

C. z-index

D. display

Solution

1. Step 1: Understand stacking order control

   The z-index property sets which element appears on top when elements overlap.

2. Step 2: Differentiate from other properties

   position sets how elements are positioned but does not control layering alone; display and float affect layout, not stacking order.

3. Final Answer:

   z-index -> Option C

4. Quick Check:

   Stack order = z-index [OK]

Hint: Remember: z-index controls front/back layering [OK]

Common Mistakes:

• Confusing position with z-index
• Thinking display controls layering
• Assuming float affects stacking

2. Which of the following is the correct way to make z-index work on an element?

easy

A. Set float: left;

B. Set position: static;

C. Set display: block;

D. Set position: relative; or absolute

Solution

1. Step 1: Identify position values that enable z-index

   Only elements with position set to relative, absolute, fixed, or sticky respond to z-index.

2. Step 2: Exclude static and other properties

   position: static is default and ignores z-index. display and float do not enable z-index.

3. Final Answer:

   Set position to relative or absolute -> Option D

4. Quick Check:

   z-index works only with positioned elements [OK]

Hint: Use relative or absolute position for z-index to work [OK]

Common Mistakes:

• Using position: static and expecting z-index to work
• Confusing display or float with position
• Not setting position at all

3. Given the CSS below, which element will appear on top?

div {
  position: relative;
}
#box1 {
  z-index: 5;
  background: red;
  width: 100px;
  height: 100px;
}
#box2 {
  position: absolute;
  z-index: 3;
  background: blue;
  width: 100px;
  height: 100px;
  top: 20px;
  left: 20px;
}

medium

A. The red box (#box1) appears on top

B. The blue box (#box2) appears on top

C. Both boxes appear side by side without overlap

D. Neither box appears because of missing position

Solution

1. Step 1: Check positions and z-index values

   #box1 has position: relative and z-index: 5. #box2 has position: absolute and z-index: 3.

2. Step 2: Compare z-index values

   Higher z-index means the element is closer to the front. 5 is greater than 3, so #box1 is on top.

3. Final Answer:

   The red box (#box1) appears on top -> Option A

4. Quick Check:

   Higher z-index = front [OK]

Hint: Higher z-index means element is on top [OK]

Common Mistakes:

• Assuming absolute position always appears on top
• Ignoring z-index values
• Thinking position type alone controls layering

4. Why does the z-index property not work on this element?

.popup {
  z-index: 10;
  background: yellow;
  width: 200px;
  height: 100px;
}

medium

A. Because z-index only works on elements with a position other than static

B. Because the background color is missing opacity

C. Because width and height are not set to 100%

D. Because z-index requires a parent with position relative

Solution

1. Step 1: Check element's position property

   The element has no position set, so it defaults to static.

2. Step 2: Understand z-index requirements

   z-index only works on elements with position set to relative, absolute, fixed, or sticky. Static elements ignore z-index.

3. Final Answer:

   z-index only works on positioned elements -> Option A

4. Quick Check:

   Position must be non-static for z-index [OK]

Hint: Set position to relative or absolute for z-index to work [OK]

Common Mistakes:

• Thinking background color affects z-index
• Believing width/height affect layering
• Assuming parent position is required

5. You have three overlapping elements with these styles:

#a { position: relative; z-index: 2; }
#b { position: absolute; z-index: 1; }
#c { position: relative; z-index: 3; }

How can you make #b appear on top without changing its z-index value?

hard

A. Change #b's position to relative and keep z-index 1

B. Wrap #b in a parent with higher z-index and position set

C. Set #a and #c to position: static

D. Increase #b's width and height

Solution

1. Step 1: Understand stacking context

   Elements create stacking contexts based on position and z-index. #b has z-index 1 but is inside its own stacking context.

2. Step 2: Use parent stacking context to raise #b

   Wrapping #b in a parent with a higher z-index and position creates a new stacking context that can appear above #a and #c without changing #b's z-index.

3. Final Answer:

   Wrap #b in a positioned parent with higher z-index -> Option B

4. Quick Check:

   Use parent stacking context to control layering [OK]

Hint: Use parent with higher z-index to raise child layering [OK]

Common Mistakes:

• Trying to change z-index of #b directly
• Changing position without stacking context
• Ignoring stacking contexts created by parents