Chapter 14 Intermediate 58 Questions

Practice Questions — Display and Positioning (static, relative, absolute, fixed, sticky)

← Back to Notes

16 Easy

19 Medium

10 Hard

Topic-Specific Questions

Question 1

Easy

Which display value starts an element on a new line and takes full width?

Default for divs.

block

Question 2

Easy

What happens if you set width and height on display: inline?

Inline elements have limits.

Nothing. Inline elements ignore width and height. They only take the size of their content.

Question 3

Easy

What is the difference between display: none and visibility: hidden?

Layout space.

display: none removes the element from the layout entirely (other elements move up). visibility: hidden keeps the space but makes it invisible.

Question 4

Easy

What is the default position value?

All elements start with this.

static

Question 5

Easy

Does position: relative remove the element from normal flow?

It still leaves a ghost where it was.

No. The element still takes its original space. Any top/right/bottom/left offset moves only the visual position.

Question 6

Easy

What does position: fixed anchor the element to?

It ignores parents.

The viewport (browser window). It stays in the same screen position when scrolling.

Question 7

Easy

What anchors position: absolute?

The nearest positioned ancestor.

The nearest ancestor with position set to anything other than static. If no such ancestor exists, it uses the viewport.

Question 8

Easy

Does z-index work on position: static elements?

Static is the default.

No. z-index only works on positioned elements (relative, absolute, fixed, sticky).

Question 9

Easy

What does overflow: auto do?

Scrollbars appear as needed.

Adds scrollbars only when content exceeds the box. If content fits, no scrollbars appear.

Question 10

Easy

What display value is used for navigation links that should sit in a row and also have padding?

Flows like text but accepts sizing.

inline-block

Question 11

Medium

What is the result?

.parent { position: relative; width: 300px; height: 200px; background: #eee; }
.child { position: absolute; top: 10px; right: 10px; }

Child is pinned relative to the parent.

The child is pinned to the top-right corner of the parent, 10px from each edge.

Question 12

Medium

What does this produce?

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

top/left moves the top-left corner to center. transform shifts back by half the modal size.

A perfectly centered modal on the viewport, regardless of its size.

Question 13

Medium

What does this sticky nav do?

nav { position: sticky; top: 0; z-index: 100; }

Sticky sticks when the threshold is reached.

Scrolls with the page until it reaches the top of the viewport, then sticks in place while the rest of the page scrolls beneath it.

Question 14

Medium

Which has the highest visual stack order?

.a { position: absolute; z-index: 1; }
.b { position: absolute; z-index: 10; }
.c { position: absolute; z-index: 5; }

Higher z-index wins.

.b (z-index 10)

Question 15

Medium

What happens to the page when you add position: absolute to an element that was previously in normal flow?

Removed from flow.

The element is removed from the layout. Surrounding elements shift up to fill the space it used to take.

Question 16

Medium

What does overflow: hidden do to content that is bigger than its container?

Crops.

Clips (crops) any content that extends beyond the box. No scrollbars appear.

Question 17

Medium

What does this do to a badge on a card?

.card { position: relative; }
.badge { position: absolute; top: -10px; right: -10px; }

Negative offsets push it outside.

The badge floats outside the top-right corner of the card, hanging off the edge by 10px in each direction.

Question 18

Medium

Why doesn't this z-index work?

.item { z-index: 999; }

Missing property.

Because there is no position property set. z-index requires position to be anything except static.

Question 19

Medium

What is the difference between overflow: scroll and overflow: auto?

When do scrollbars appear?

scroll ALWAYS shows scrollbars, even if content fits. auto shows scrollbars only when needed.

Question 20

Medium

How do you position an element in the top-right corner of its parent?

Two CSS declarations.

Set the parent to position: relative and the child to position: absolute; top: 0; right: 0;. The child will be pinned to the parent's top-right.

Question 21

Hard

What is the issue?

.parent-1 { position: relative; z-index: 1; }
.parent-2 { position: relative; z-index: 2; }
.parent-1 .child { position: absolute; z-index: 9999; }

Stacking contexts.

The child (even with z-index 9999) cannot appear above parent-2. Its z-index is scoped to parent-1's stacking context, and parent-2 (z-index 2) is stacked above parent-1 (z-index 1).

Question 22

Hard

Why does position: sticky; top: 0; not stick?

.parent { overflow: hidden; }
.sticky-child { position: sticky; top: 0; }

Sticky has a scrollable ancestor requirement.

Because an ancestor has overflow: hidden, which prevents scrolling and breaks sticky positioning. Sticky needs a scrollable ancestor.

Question 23

Hard

Which value moves ONLY the visual position but keeps the element in normal flow?

One value does this.

position: relative with top/right/bottom/left offsets. The element's original space is preserved; only the rendered position shifts.

Question 24

Hard

When should you use position: fixed vs position: sticky?

Always visible vs only visible after scrolling.

Use fixed when an element must always be visible at the same screen position (floating action buttons, modal overlays). Use sticky when an element should scroll normally until it reaches a threshold, then stay pinned (sticky navbars, section headers, table headers).

Question 25

Hard

What is a stacking context and how is it created?

A mini z-index world.

A stacking context is a self-contained layer where child elements are stacked relative to each other. It is created by: the root element, any positioned element with z-index other than auto, elements with opacity less than 1, elements with transform, filter, or certain other properties. Children can never escape their parent's stacking context.

Mixed & Application Questions

Question 1

Easy

Does display: block accept width and height?

Yes.

Yes. Block elements respect both width and height (unlike inline).

Question 2

Easy

Which display makes an element disappear AND free up its space?

Not visibility.

display: none

Question 3

Easy

Which position keeps an element on screen while scrolling?

Two options.

fixed (always) and sticky (after reaching a threshold).

Question 4

Easy

What anchors a position: relative element?

Its own natural position.

Its own original position in normal flow. top/right/bottom/left offset it from where it would have been.

Question 5

Easy

How do you hide something but keep its space?

Visibility.

visibility: hidden

Question 6

Easy

Which CSS property controls how content bigger than its box is handled?

Overflow.

overflow

Question 7

Medium

What does this do?

img { display: block; margin: 0 auto; }

Block + margin auto.

Displays the image as a block (no inline whitespace issues) and centers it horizontally in its container.

Question 8

Medium

Can you use top/bottom on a position: static element?

Requires positioning.

No. top/right/bottom/left only work on positioned elements (relative, absolute, fixed, sticky).

Question 9

Medium

What is the behavior of a position: sticky element without a threshold?

Without top/bottom etc.

It behaves identically to position: relative. It never actually sticks.

Question 10

Medium

How do you make a floating action button in the bottom-right of the page?

Fixed with offsets.

position: fixed; bottom: 30px; right: 30px;

Question 11

Medium

What is inline-block best for?

Text flow + sizing.

Elements that should flow in a row like inline elements but need explicit width, height, or padding. Examples: navigation items, badges, pill buttons, tags.

Question 12

Medium

Why use position: relative on a parent without offsets?

Positioning context.

To create a positioning context for absolutely positioned children. The parent itself does not move, but any absolute child inside it is anchored to the parent instead of the viewport.

Question 13

Medium

When should you use overflow: hidden vs overflow: auto?

Clip vs scroll.

Use hidden to clip overflowing content completely (no scrollbars, content is cut off). Use auto to allow users to scroll through overflowing content with scrollbars.

Question 14

Medium

How would you build a corner badge on a product card?

Parent positioned relative, badge absolute with negative offsets.

Set the card to position: relative. Add a badge element with position: absolute; top: -8px; right: -8px;. The badge will hang off the card's top-right corner.

Question 15

Medium

Why is z-index 9999 sometimes not enough to put an element on top?

Stacking contexts.

Because z-index is scoped to the parent's stacking context. If the parent has a lower z-index than another parent's stack, no child inside can escape. The child is trapped below the other stack.

Question 16

Hard

What is the final positioned area?

.wrap { position: relative; width: 400px; height: 300px; }
.layer { position: absolute; top: 0; left: 0; right: 0; bottom: 0; }

All four edges set to 0.

The layer fills the entire .wrap element (400x300), covering it completely.

Question 17

Hard

What does this produce?

.tooltip { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); }

bottom: 100% means above the parent.

Positions the tooltip directly above its positioned parent, horizontally centered on the parent.

Question 18

Hard

Why use transform: translate(-50%, -50%) for centering?

Offsets by 50% of the element's own size.

When combined with top: 50% and left: 50%, this shifts the element back by half its own width and height, centering it exactly. Percentage translations refer to the element's own size, so -50% always works regardless of the element's dimensions.

Question 19

Hard

What are the 4 common positioning patterns?

Named patterns.

(1) Sticky navbar (position: sticky; top: 0). (2) Modal overlay (position: fixed covering viewport + centered child). (3) Corner badge (relative parent + absolute child with negative offsets). (4) Floating action button (position: fixed; bottom+right).

Question 20

Hard

Why does display: none not animate with CSS transitions?

Discrete vs continuous values.

display is a non-animatable property -- it changes instantly between values with no intermediate states. To fade elements in and out, use opacity and visibility (both animatable) instead.

Multiple Choice Questions

MCQ 1

Which display value is default for a div?

A. inline
B. block
C. inline-block
D. flex

Answer: B
B is correct. divs are block by default. They start on a new line and take full width.

MCQ 2

Which display value is default for a span?

A. inline
B. block
C. inline-block
D. none

Answer: A
A is correct. spans are inline by default. They flow with text and ignore width/height.

MCQ 3

Which completely removes an element from layout?

A. visibility: hidden
B. opacity: 0
C. display: none
D. position: absolute

Answer: C
C is correct. display: none removes the element from the document flow. Other elements act as if it does not exist.

MCQ 4

Which keeps the element invisible but preserves its layout space?

A. display: none
B. visibility: hidden
C. opacity: 0
D. All of the above

Answer: B
B is correct. visibility: hidden and opacity: 0 both preserve space, but visibility: hidden is the official 'invisible but still there' answer.

MCQ 5

Which is the default position value?

A. static
B. relative
C. absolute
D. fixed

Answer: A
A is correct. All elements default to static. top/right/bottom/left have no effect on static elements.

MCQ 6

Which position value pins an element to the viewport?

A. static
B. relative
C. absolute
D. fixed

Answer: D
D is correct. fixed elements stay in the same screen position regardless of scrolling.

MCQ 7

Which position value is a hybrid of relative and fixed?

A. static
B. sticky
C. absolute
D. float

Answer: B
B is correct. sticky behaves like relative until you scroll past its threshold, then like fixed.

MCQ 8

Does z-index work on static elements?

A. Yes, always
B. No, only on positioned elements
C. Only with !important
D. Only in older browsers

Answer: B
B is correct. z-index requires position to be something other than static.

MCQ 9

Which overflow value shows scrollbars only when needed?

A. visible
B. hidden
C. scroll
D. auto

Answer: D
D is correct. auto only shows scrollbars when content overflows. scroll always shows them even if content fits.

MCQ 10

Which display value flows horizontally AND accepts width/height?

A. block
B. inline
C. inline-block
D. none

Answer: C
C is correct. inline-block is the best of both worlds: horizontal flow with full box model support.

MCQ 11

An absolutely positioned element is positioned relative to...

A. The viewport always
B. Its nearest ancestor that has position set to anything other than static
C. Its parent always
D. The root element

Answer: B
B is correct. Absolute elements use the nearest positioned ancestor. If there is none, they fall back to the viewport.

MCQ 12

What happens without a position on the parent?
.child { position: absolute; top: 0; left: 0; }

A. The child is positioned at the viewport's top-left
B. The child stays in place
C. The child disappears
D. The parent becomes relative automatically

Answer: A
A is correct. Without a positioned ancestor, absolute elements are positioned relative to the viewport.

MCQ 13

What does overflow: hidden do?

A. Hides the element
B. Crops content that extends beyond the box
C. Makes scrollbars appear
D. Deletes children

Answer: B
B is correct. overflow: hidden clips overflowing content. No scrollbars appear.

MCQ 14

How do you perfectly center a fixed modal using top/left/transform?

A. top: 0; left: 0
B. top: 50%; left: 50%
C. top: 50%; left: 50%; transform: translate(-50%, -50%)
D. margin: auto

Answer: C
C is correct. top/left 50% places the top-left corner at center. transform: translate(-50%, -50%) shifts the modal back by half its own size to center it exactly.

MCQ 15

Which position value does NOT remove the element from flow?

A. relative
B. absolute
C. fixed
D. None

Answer: A
A is correct. relative keeps the element in normal flow. absolute and fixed remove it.

MCQ 16

What value does position: sticky need to work?

A. z-index
B. At least one of top/right/bottom/left as a threshold
C. display: flex
D. margin: 0

Answer: B
B is correct. Sticky requires a threshold value to know when to stick. Without one it behaves like relative.

MCQ 17

What does display: inline ignore?

A. Color
B. Font-size
C. Width and height
D. Text content

Answer: C
C is correct. Inline elements ignore width and height. They size to their content only.

MCQ 18

Which creates a new stacking context?

A. display: block
B. position: relative with z-index: 1
C. margin: 0
D. color: red

Answer: B
B is correct. A positioned element with a non-auto z-index creates a new stacking context. Transform, opacity less than 1, and filters also create them.

MCQ 19

Which CSS makes a navbar stick to the top when scrolling?

A. position: fixed; top: 0;
B. position: sticky; top: 0;
C. position: absolute; top: 0;
D. Both A and B work

Answer: D
D is correct. Both work. fixed always pins to viewport. sticky scrolls normally first, then sticks. sticky is often preferred because it feels more integrated.

MCQ 20

How do you position a badge in the top-right corner of a card?

A. margin: 0 0 0 auto
B. float: right
C. position: absolute; top: 0; right: 0 (with positioned parent)
D. text-align: right

Answer: C
C is correct. Set the card to position: relative. Add the badge with position: absolute; top: 0; right: 0.

MCQ 21

Why might z-index: 9999 still not put an element on top?

A. The browser is broken
B. It is trapped in a parent stacking context that is below the competing element's parent
C. z-index only supports up to 1000
D. z-index needs opacity

Answer: B
B is correct. Child z-index is scoped to the parent stacking context. A high child z-index cannot escape a parent that is stacked lower.

MCQ 22

How do you make an overlay cover the entire viewport?

A. width: 100%; height: 100%;
B. position: fixed; top: 0; left: 0; right: 0; bottom: 0;
C. margin: 0
D. position: sticky; top: 0;

Answer: B
B is correct. Fixed positioning with all four edges at 0 fills the viewport. Classic modal overlay pattern.

MCQ 23

Which pair prevents layout shift when hiding/showing on hover?

A. display: none; and display: block;
B. visibility: hidden; and visibility: visible;
C. float: left; and float: none;
D. margin-top: -100%; and margin-top: 0;

Answer: B
B is correct. visibility preserves the element's space. display: none removes it entirely, causing layout shifts.

MCQ 24

Why does sticky fail when an ancestor has overflow: hidden?

A. Sticky always fails
B. Sticky needs a scrollable ancestor; overflow: hidden prevents scrolling in that ancestor and breaks the stick
C. overflow: hidden removes the element
D. Sticky requires JavaScript

Answer: B
B is correct. Sticky requires a scrollable parent context. overflow: hidden without scrolling ability can break sticky.

MCQ 25

Which pattern floats a button in the bottom-right of the viewport?

A. margin-left: auto; margin-top: auto;
B. position: fixed; bottom: 30px; right: 30px;
C. float: right;
D. text-align: right;

Use position: relative on the image wrapper and position: absolute on the text overlay.

<!DOCTYPE html>
<html>
<head><style>
  body { font-family: Arial, sans-serif; padding: 40px; background: #f3f4f6; display: flex; justify-content: center; }
  .card {
    position: relative;
    width: 400px;
    height: 280px;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
    background: linear-gradient(135deg, #a855f7, #06b6d4);
  }
  .overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 20px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
    color: white;
  }
  .tag {
    display: inline-block;
    background: rgba(255, 255, 255, 0.2);
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 8px;
  }
  h3 { margin: 0 0 4px; font-size: 22px; }
  p  { margin: 0; font-size: 13px; opacity: 0.9; }
</style></head>
<body>
  <div class="card">
    <div class="overlay">
      <span class="tag">Tutorial</span>
      <h3>CSS Positioning</h3>
      <p>By Riya Patel - 8 min read</p>
    </div>
  </div>
</body>
</html>

Need to Review the Concepts?

Go back to the detailed notes for this chapter.

Read Chapter Notes

Want to learn web development with a live mentor?

Explore our Frontend Masterclass