Top CSS Interview Questions and Answers

author image Hirely
at 07 Jan, 2025
  • Software Development
  • Questions

    • 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:

    1. Stacking Context:

      • The z-index only works on positioned elements (elements with a position other than static, such as relative, absolute, fixed, or sticky).
      • Elements are stacked based on their z-index values, with higher values placed in front of elements with lower values. By default, if no z-index is applied, elements stack in the order they appear in the HTML document (i.e., the last element appears on top).

    2. Value of z-index:

      • The z-index value can be positive (e.g., z-index: 10;), negative (e.g., z-index: -10;), or zero (e.g., z-index: 0;).
      • Higher z-index values will be displayed in front of elements with lower z-index values.
      • Negative values can be used to place elements behind others.
      • z-index: 0; means the element is in the middle of the stacking context.

    3. Stacking Order:

      • Elements with a higher z-index appear in front of those with a lower z-index, but only within the same stacking context.
      • If an element is inside a parent element with a z-index and that parent has a stacking context, the child elements’ z-index values will be relative to the parent’s stacking context.

    4. Default Value:

      • The default value of z-index is auto, meaning the element will inherit the stacking order of its parent.

    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:

    • .box1 will be stacked behind .box2 because z-index: 1 < z-index: 2.
    • .box3, with a z-index of 0, will appear behind both .box1 and .box2 despite being in the document later.

    Important Notes:

    1. Stacking Contexts: A new stacking context can be created by setting certain CSS properties, like position or opacity, or by using transform and filter. Within this context, the z-index values are relative to the stacking context, not the entire document.

    2. Global Stacking Order: Even though you can set individual z-index values for elements, the stacking order is always influenced by the document’s flow and the stacking context. If elements are in different stacking contexts, their z-index values won’t affect each other.

    3. Limitations: The z-index only works on elements that are positioned (relative, absolute, fixed, sticky). It does not work on static elements.

    Summary:

    • The z-index property in CSS controls the stacking order of positioned elements, determining which elements appear in front of others when they overlap.
    • Higher z-index values make elements appear on top of those with lower z-index values.
    • It only works on elements with a position other than static.

    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:

    1. 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, or left properties, 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 */
}

    2. 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, and left properties. 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 */
}

    3. absolute:

      • Description: An element with position: absolute; is positioned relative to the nearest positioned ancestor (i.e., an ancestor element with position: relative, absolute, or fixed). 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, and left properties 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 */
}

    4. 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 */
}

    5. sticky:

      • Description: An element with position: sticky; is treated as relative until it reaches a defined threshold (using top, right, bottom, or left), 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, or left properties. 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 */
}

    Summary of position values:

    ValueDescriptionBehavior
    staticDefault positioning (normal document flow)No offsets (top, left, bottom, right are ignored)
    relativePositioned relative to its normal positionCan be offset from its normal position
    absolutePositioned relative to the nearest positioned ancestor elementRemoved from the document flow, positioned with top, left, right, bottom
    fixedPositioned relative to the viewportStays fixed in place while the page is scrolled
    stickyPositioned relative to the viewport until a threshold is reachedSticks 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.

    Tags
    Share

    Related Posts

    Trace Job opportunities

    Hirely, your exclusive interview companion, empowers your competence and facilitates your interviews.

    Get Started Now