Frontend Interview Questions (Part 3)

CSS stacking contexts, React components, positioning, HTTP, and storage

By Hank Kim
Posted on August 7, 2025
Back to Home

Frontend Interview Questions (Part 3)

CSS stacking contexts, React components, positioning, HTTP, and storage

August 07, 2025 Hank Kim

Frontend Interview Questions (Part 3)

This part covers CSS stacking contexts, controlled/uncontrolled components, Pure Components, positioning, HTTP protocols, and client-side storage options.

Question 1. What is z-index and what is a Stacking Context?

z-index

  • Determines the stacking order of elements along the z-axis (which element appears “in front”).
  • Higher z-index values are placed in front of lower values.

Stacking Context

  • A new stacking context is created under certain conditions:

    • Root element (<html>)
    • Elements with position: absolute | relative | fixed | sticky and z-index not auto
    • Elements with opacity < 1
    • Elements with a transform applied

Important Rules

  • z-index is only compared within the same stacking context.
  • Even if a child has z-index: 9999, it cannot escape its parent’s stacking context if the parent is behind another element.

Common Issue

  • Modals, dropdowns, or tooltips appear “behind” headers or other elements despite very high z-index.
  • Cause: They are trapped in a parent stacking context.

Solutions

  1. Remove the parent’s stacking context (remove position, transform, etc.).
  2. Render the modal/dropdown at the root level (e.g., inside <body>).

React Portals

  • React provides ReactDOM.createPortal to render components outside the normal DOM hierarchy.
  • Useful for modals, dropdowns, and tooltips, ensuring they are not trapped by stacking contexts.

Question 2. What are Controlled vs Uncontrolled Components in React?

  • Controlled Components

    • Form elements (input, textarea, etc.) where the value is controlled by React state.

    • Example:

      const [value, setValue] = useState("");
<input value={value} onChange={(e) => setValue(e.target.value)} />;
    • Useful for instant validation and React-state synchronization.

  • Uncontrolled Components

    • Form elements that manage their own state internally in the DOM.
    • Accessed via ref.

    • Example:

      const ref = useRef();
<input ref={ref} />;
// later: ref.current.value
    • Useful for simple forms where you only need values on submit.

👉 Difference: Is the state managed by React or by the DOM itself?

Question 3. What is a Pure Component?

  • Definition: A class component that implements shouldComponentUpdate with shallow prop/state comparison.
  • Prevents re-rendering when props/state haven’t changed.
class MyComponent extends React.PureComponent {
  render() {
    return <div>{this.props.value}</div>;
  }
}

  • Now less relevant:

    • With hooks, React already optimizes re-renders.
    • Calling setState with the same value will not cause re-renders.

Question 4. Explain CSS position values.

  1. static (default)

    • Follows the normal document flow.

  2. relative

    • Positioned relative to its original position.

  3. absolute

    • Positioned relative to the nearest ancestor with position other than static.

  4. fixed

    • Positioned relative to the viewport; does not move during scrolling.

  5. sticky

    • Acts like relative until a scroll threshold is reached, then acts like fixed.
    • Commonly used for sticky headers.

Question 5. Compare HTTP/1.1, HTTP/2, and HTTP/3.

HTTP/1.1

  • Opens a separate TCP connection per request.
  • Connection reuse possible with Keep-Alive.
  • Suffers from Head-of-Line (HOL) blocking.

HTTP/2

  • Single TCP connection handles multiple requests (multiplexing).
  • Uses header compression (HPACK).
  • Much faster than HTTP/1.1 but still inherits TCP limitations.

HTTP/3

  • Uses QUIC (UDP-based) instead of TCP.
  • Avoids TCP handshake delays.
  • Eliminates HOL blocking at the transport layer.
  • More resilient to packet loss.
  • Key-value storage automatically sent with every HTTP request.
  • Typically used for authentication/session data.
  • Small size limit (~4KB).
  • Can set expiration and Path scope.

LocalStorage

  • Key-value string storage.
  • Limit: ~5–10 MB.
  • Persistent even after browser restart.
  • Shared across tabs of the same origin.
  • Not sent to the server automatically.

SessionStorage

  • Same API as LocalStorage.
  • Data is deleted when the tab/window is closed.
  • Isolated per tab (not shared across windows/tabs).

IndexedDB

  • Asynchronous NoSQL database provided by the browser.
  • Stores structured data (objects, arrays, files).
  • Much larger storage capacity (hundreds of MB to GB).
  • Supports transactions, indexes, and queries.
  • Best for PWAs, offline apps, or large caches.

👉 Summary:

  • Cookie: Small, server communication, auth/session.
  • LocalStorage: Persistent, client-only, small data.
  • SessionStorage: Per-tab storage, short-lived.
  • IndexedDB: Large-scale, structured, async DB.
Tags: Frontend CSS React Network Interview