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:

Value	Description
static	Default; positioned normally in the document flow
relative	Positioned relative to its normal position
absolute	Positioned relative to the nearest positioned ancestor
fixed	Positioned relative to the browser window
sticky	Switches between relative & fixed, depending on scroll position

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;
}