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 & Layers 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.
Float is used to move elements like images or boxes to the left or right so that text wraps around them. The clear property is used to stop elements from wrapping around floated items. For example, after floating an image right, applying clear: both to the next section ensures it starts below.
img { float: right; }
.footer { clear: both; }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.
Sticky elements behave like relative elements until a certain scroll point, where they switch to fixed. It requires a top or bottom offset and only works inside a scrollable ancestor. It’s ideal for sticky headers and table headings.
header { position: sticky; top: 0; }CSS has five main position values: static, relative, absolute, fixed, and sticky. Static is default and doesn’t move. Relative moves an element based on its normal position. Absolute positions relative to the nearest positioned ancestor. Fixed stays in place during scroll. Sticky combines relative and fixed behaviors depending on scroll offset.
div { position: absolute; top: 0; }z-index defines how elements overlap along the z-axis. It works only on positioned elements. Each positioned element can create a new stacking context, meaning its children are stacked independently from the rest of the page. Higher z-index values appear above lower ones within the same context.
.popup { position: relative; z-index: 10; }You can fix it by setting a higher z-index and ensuring the tooltip’s parent has a proper stacking context. Often the issue arises because a parent element has a lower z-index or overflow set to hidden, preventing proper layering.
.tooltip { position: absolute; z-index: 9999; }By default, all elements have a static position. Static elements are positioned according to the normal document flow and do not respond to top, right, bottom, or left offsets.
div { position: static; }An element with position: absolute is positioned relative to the nearest ancestor that has a position other than static. If no such ancestor exists, it positions relative to the document body.
.child { position: absolute; top: 0; left: 0; }The fixed position keeps an element locked relative to the viewport. It doesn’t move when the page is scrolled, making it useful for headers, menus, or floating buttons.
nav { position: fixed; top: 0; width: 100%; }A sticky element toggles between relative and fixed positioning depending on the scroll position. It stays fixed only after crossing a defined offset.
header { position: sticky; top: 0; }The float property moves an element to the left or right, allowing inline content like text or images to wrap around it. It was commonly used for layouts before Flexbox and Grid.
img { float: right; margin: 10px; }The clear property specifies which sides of an element floating elements are not allowed. For example, clear: both ensures the element appears below any floated elements.
.footer { clear: both; }z-index determines the stacking order of positioned elements. Elements with a higher z-index appear above those with a lower value, but it works only on elements with a position other than static.
.modal { position: absolute; z-index: 999; }Position: relative keeps the element in the normal document flow but allows it to move relative to its original position using top, right, bottom, or left properties.
div { position: relative; top: 10px; }Both remove the element from normal flow, but absolute positions relative to the nearest positioned ancestor, while fixed positions relative to the viewport. Fixed elements don’t move when scrolling, whereas absolute elements scroll with their container.
.menu { position: fixed; top: 0; }
.tooltip { position: absolute; top: 20px; }