Why is this a difficult question?
This question tests more than just memorization. To answer it properly, you need to understand:
- How the CSS layout flow works.
- How parent and child elements interact.
- How positioning behaves during scrolling.
- Real-world use cases such as navigation bars, tooltips, modals, and dropdown menus.
Expected Answer Summary:
- position: relative – The element stays in its normal position but can be moved relative to itself.
- position: absolute – The element is positioned relative to its nearest positioned ancestor.
- position: fixed – The element is positioned relative to the browser viewport and stays in place when scrolling.
- position: sticky – The element behaves like a normal element until a scroll threshold is reached, then it sticks to a specified position.
- .parent {
- position: relative;
- }
.child {
position: absolute;
top: 10px;
right: 10px;
}
In this example, .child is positioned relative to .parent.
Why do interviewers ask this question?
Because many developers can write CSS, but fewer truly understand how positioning works under the hood. A solid understanding of positioning is essential for building responsive and professional web interfaces.
