CSS Positioning & Stacking — Interview Questions & Answers

What is CSS Positioning?

Ques: What is the position property in CSS?

Ans: The position property defines how an element is placed in a web page layout. It determines where and how the browser renders an element.

Common position values:

Example:

div {
  position: absolute;
  top: 20px;
  left: 30px;
}

Static Position

Ques: What is position: static?

• It is the default position for all elements.
• Elements appear in normal flow, one after another.
• Top, left, bottom, right properties don’t affect static elements.

Example:

div {
  position: static; /* default */
}

Relative Position

Ques: How does position: relative work?

• The element stays in the normal document flow
• It can be moved relative to its original position
• Space is still reserved in layout

Example:

div {
  position: relative;
  top: 10px; /* moves down */
  left: 20px; /* moves right */
}

Absolute Position

Ques: What is position: absolute in CSS?

Ans: An element with position: absolute is:

• Removed from the normal document flow
• Positioned relative to the nearest positioned ancestor (relative, absolute, fixed, or sticky)
• If none exists, it positions relative to the viewport

Example:

.container {
  position: relative;
}
.box {
  position: absolute;
  top: 0;
  right: 0;
}

Fixed Position

Ques: What does position: fixed mean?

• Element is fixed relative to the viewport
• Does not move when page scrolls
• Commonly used for navbars, buttons, headers

Example:

.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  background: #333;
  color: white;
}

Sticky Position

Ques: What is position: sticky in CSS?

Ans: It behaves like relative until a given scroll position, then becomes fixed.

Example:

header {
  position: sticky;
  top: 0;
  background: white;
}

CSS Coordinates

Ques: What are top, right, bottom, and left used for?

Ans: They define the offset of an element from its reference point (depending on its positioning context).

Example:

.box {
  position: absolute;
  top: 50px;
  left: 100px;
}

CSS Z-index and Stacking Context

Ques: What is z-index in CSS?

Ans: The z-index property controls the stacking order of overlapping elements on the z-axis (front-to-back).

Example:

div {
  position: relative;
  z-index: 2;
}

Ques: Does z-index work on static elements?

Ans: No, z-index works only on elements with a position value other than static.

Ques: What is a stacking context?

Ans: A stacking context is a 3D space in which elements are stacked according to z-index.

It’s created when an element has:

• position + z-index value (other than auto)
• opacity < 1
• transform, filter, or will-change property
• isolation: isolate

Example:

.container {
  position: relative;
  z-index: 1;
  opacity: 0.9; /* new stacking context */
}

Float & Clear

Ques: What is the float property in CSS?

Ans: Used to push elements to the left or right, allowing other content to wrap around it.

Example:

img {
  float: right;
  margin: 10px;
}

Ques: What does the clear property do?

Ans: clear stops elements from flowing next to floated elements.

Example:

footer {
  clear: both;
}

Ques: Why is float considered legacy for layouts?

Ans: Because it was originally designed for text wrapping, not layout design.

Modern layouts use Flexbox and Grid instead.

Inline-block Layout

Ques: What is display: inline-block?

Ans: It allows an element to:

• Behave inline (no line breaks)
• But respect block-level properties (width, height, padding, margin)

Example:

button {
  display: inline-block;
  padding: 10px;
}

Modern Positioning — Anchor Position API (CSS 2024+)

Ques: What is the CSS Anchor Position API?

Ans: The Anchor Position API lets you position elements (like popovers, tooltips, dropdowns) relative to another element, without JavaScript.

Example:

button {
  position-anchor: pop;
}

.tooltip {
  position: absolute;
  position-area: right;
  anchor-name: --pop;
}