Get the Preplance app for a seamless learning experience. Practice offline, get daily streaks, and stay ahead with real-time interview updates.
Get it on
Google Play
4.9/5 Rating on Store
CSS · Question Set
Positioning, Z-Index & Layout Flow interview questions for placements and exams.
Questions
14
Included in this set
Subject
CSS
Explore more sets
Difficulty
Mixed
Level of this set
Go through each question and its explanation. Use this set as a focused practice pack for CSS.
`z-index` determines the stack order of positioned elements. Higher z-index values appear in front of lower ones, within the same stacking context.
.box1 { z-index: 2; } .box2 { z-index: 5; }For complete preparation, combine this set with full subject-wise practice for CSS. You can also explore other subjects and sets from the links below.
The `fixed` position keeps an element pinned to the viewport, unaffected by scrolling. Commonly used for headers, navbars, or floating buttons.
.navbar { position: fixed; top: 0; width: 100%; }By default, all elements are positioned `static`. This means they follow the normal document flow and are not affected by top, left, right, or bottom properties.
div { position: static; }A relatively positioned element remains in the document flow but can be offset visually using top, left, bottom, or right properties.
div { position: relative; top: 10px; left: 20px; }A new stacking context forms when an element is positioned (other than static) and has a z-index. It isolates child z-index layers from the outer context.
.container { position: relative; z-index: 10; }Absolutely and fixed positioned elements are removed from normal document flow, meaning they do not affect the positioning of surrounding elements.
div { position: absolute; top: 50px; left: 50px; }`static` (default, normal flow), `relative` (offset from normal flow), `absolute` (removed from flow, relative to ancestor), `fixed` (relative to viewport), and `sticky` (hybrid between relative and fixed). Each serves a layout purpose for control and alignment.
div { position: relative; top: 10px; }Because z-index works only within the same stacking context. If a parent creates its own stacking context (e.g., via position and z-index), child elements can’t overlap elements outside that context, no matter their z-index.
.parent { position: relative; z-index: 1; } .child { z-index: 9999; }Use absolute for elements that need to align relative to a container (like tooltips or badges). Use fixed when you want an element to stay visible during scroll, like sticky headers or chat widgets.
.tooltip { position: absolute; top: 100%; left: 0; } .navbar { position: fixed; top: 0; }Apply `position: sticky` with `top: 0`. This allows the header to scroll with the page until it reaches the top, then it sticks. Ensure parent containers do not have overflow hidden, or it won’t work.
header { position: sticky; top: 0; background: white; z-index: 100; }Inspect with DevTools to check stacking context, z-index values, and position types. Simplify by removing z-indexes step-by-step. Remember z-index only works on positioned elements. Check parent overflow and isolation too.
div { position: relative; z-index: 5; }An absolutely positioned element is taken out of the normal flow and positioned relative to its nearest ancestor with a position other than static. If none exists, it positions relative to the document body.
.child { position: absolute; top: 0; left: 0; }Sticky combines relative and fixed behavior. It scrolls with content until a defined position (like top: 0) and then sticks to that position.
header { position: sticky; top: 0; background: white; }Normal flow is the default way elements are laid out — block elements stack vertically, inline elements flow horizontally. Understanding it is crucial because most layout problems arise from breaking or removing elements from flow (e.g., with absolute or float).
p { display: block; } span { display: inline; }