Top CSS Interview Questions and Answers
Try Aihirely for
Smarter Interview Prep
Experience real-time AI support tailored to your Resume.
Boost your confidence and ace every question with
AI Mock Interview.
Question: What is the CSS z-index property?
Answer:
The z-index property in CSS controls the stacking order of elements on a web page. It determines which elements appear in front of others when elements overlap. By assigning a z-index value to elements, you can control their visibility in a stacked context.
Key Points About z-index:
-
Stacking Context:
- The
z-indexonly works on positioned elements (elements with a position other thanstatic, such asrelative,absolute,fixed, orsticky). - Elements are stacked based on their
z-indexvalues, with higher values placed in front of elements with lower values. By default, if noz-indexis applied, elements stack in the order they appear in the HTML document (i.e., the last element appears on top).
- The
-
Value of
z-index:- The
z-indexvalue can be positive (e.g.,z-index: 10;), negative (e.g.,z-index: -10;), or zero (e.g.,z-index: 0;). - Higher
z-indexvalues will be displayed in front of elements with lowerz-indexvalues. - Negative values can be used to place elements behind others.
z-index: 0;means the element is in the middle of the stacking context.
- The
-
Stacking Order:
- Elements with a higher
z-indexappear in front of those with a lowerz-index, but only within the same stacking context. - If an element is inside a parent element with a
z-indexand that parent has a stacking context, the child elements’z-indexvalues will be relative to the parent’s stacking context.
- Elements with a higher
-
Default Value:
- The default value of
z-indexisauto, meaning the element will inherit the stacking order of its parent.
- The default value of
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>z-index Example</title>
<style>
.box {
position: absolute;
width: 100px;
height: 100px;
}
.box1 {
background-color: red;
z-index: 1;
top: 50px;
left: 50px;
}
.box2 {
background-color: blue;
z-index: 2;
top: 80px;
left: 80px;
}
.box3 {
background-color: green;
z-index: 0;
top: 110px;
left: 110px;
}
</style>
</head>
<body>
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
</body>
</html>In this example:
.box1will be stacked behind.box2becausez-index: 1<z-index: 2..box3, with az-indexof0, will appear behind both.box1and.box2despite being in the document later.
Important Notes:
-
Stacking Contexts: A new stacking context can be created by setting certain CSS properties, like
positionoropacity, or by usingtransformandfilter. Within this context, thez-indexvalues are relative to the stacking context, not the entire document. -
Global Stacking Order: Even though you can set individual
z-indexvalues for elements, the stacking order is always influenced by the document’s flow and the stacking context. If elements are in different stacking contexts, theirz-indexvalues won’t affect each other. -
Limitations: The
z-indexonly works on elements that are positioned (relative,absolute,fixed,sticky). It does not work onstaticelements.
Summary:
- The
z-indexproperty in CSS controls the stacking order of positioned elements, determining which elements appear in front of others when they overlap. - Higher
z-indexvalues make elements appear on top of those with lowerz-indexvalues. - It only works on elements with a
positionother thanstatic.
Question: What are the different values of the position property in CSS?
Answer:
The position property in CSS determines how an element is positioned in the document. It affects the layout of the element and how it interacts with other elements in the page. The possible values of the position property are:
-
static(default value):- Description: The default position for all elements in HTML. An element with
position: static;is positioned according to the normal document flow (the order in which it appears in the HTML). - Effect on layout: The element is not affected by
top,right,bottom, orleftproperties, as these properties are ignored for static positioning. - Use case: This is used for regular flow of elements, where they are positioned in their default order in the document.
.box { position: static; /* Default value */ } - Description: The default position for all elements in HTML. An element with
-
relative:- Description: An element with
position: relative;is positioned relative to its normal position in the document flow. - Effect on layout: The element remains in the document flow, but it can be offset from its original position using the
top,right,bottom, andleftproperties. These offsets will move the element without affecting other elements. - Use case: Often used when you want to slightly adjust the position of an element relative to where it would normally be, while still keeping its space in the layout.
.box { position: relative; top: 20px; /* Moves 20px down from its normal position */ left: 30px; /* Moves 30px to the right from its normal position */ } - Description: An element with
-
absolute:- Description: An element with
position: absolute;is positioned relative to the nearest positioned ancestor (i.e., an ancestor element withposition: relative,absolute, orfixed). If there is no positioned ancestor, it is positioned relative to the initial containing block (typically the viewport). - Effect on layout: The element is removed from the document flow and does not take up space in the layout. The
top,right,bottom, andleftproperties are used to position the element within its containing block. - Use case: Often used for creating overlays, modals, dropdowns, or pop-up elements, as the element is removed from the normal document flow and can be freely positioned.
.box { position: absolute; top: 50px; /* 50px from the top of the nearest positioned ancestor */ left: 100px; /* 100px from the left of the nearest positioned ancestor */ } - Description: An element with
-
fixed:- Description: An element with
position: fixed;is positioned relative to the viewport (the visible part of the browser window), not the document or any parent element. - Effect on layout: The element is removed from the document flow, meaning it does not take up space in the layout. It remains fixed in the same position even when the page is scrolled.
- Use case: Often used for creating sticky elements like a fixed navigation bar or a floating action button that stays in place as the user scrolls.
.box { position: fixed; top: 0; /* Sticks to the top of the viewport */ left: 0; /* Sticks to the left of the viewport */ } - Description: An element with
-
sticky:- Description: An element with
position: sticky;is treated as relative until it reaches a defined threshold (usingtop,right,bottom, orleft), at which point it “sticks” to that position as the user scrolls. - Effect on layout: The element is positioned relative until it reaches a scroll position defined by the
top,right,bottom, orleftproperties. After that, it becomes fixed and stays in place as the user scrolls within the container. - Use case: Commonly used for sticky headers or navigation bars that remain visible when scrolling past a certain point in the page.
.box { position: sticky; top: 0; /* The element becomes fixed once it reaches the top of the viewport */ } - Description: An element with
Summary of position values:
| Value | Description | Behavior |
|---|---|---|
static | Default positioning (normal document flow) | No offsets (top, left, bottom, right are ignored) |
relative | Positioned relative to its normal position | Can be offset from its normal position |
absolute | Positioned relative to the nearest positioned ancestor element | Removed from the document flow, positioned with top, left, right, bottom |
fixed | Positioned relative to the viewport | Stays fixed in place while the page is scrolled |
sticky | Positioned relative to the viewport until a threshold is reached | Sticks in place after scrolling past a defined point |
Example:
.container {
position: relative; /* Parent element with positioning */
}
.box {
position: absolute;
top: 20px; /* Positioned 20px from the top of .container */
left: 30px; /* Positioned 30px from the left of .container */
}In this example, the .box element is positioned absolutely within the .container element, which is the nearest positioned ancestor.
Read More
If you can’t get enough from this article, Aihirely has plenty more related information, such as CSS interview questions, CSS interview experiences, and details about various CSS job positions. Click here to check it out.