Before learning z-index, lets look at the layered structure.
Looking at the image, we understand that we have a layered structure. Similar to the image, what if you want some element to be on top of the other element while building websites using HTML and CSS. z-index is used for the same reason
What is z-index?
- Specifies the order of the element
- Default Value: auto
- The element which has highest z-index with be on top.
- If there are multiple values with same z-index value the last positioned element is on the top.
- It is supported by almost all the browsers check it here
- It only works for positioned elements and direct children of flex container
- Example of z-index code
Exception where z-index will not work
- Children of an element will always have higher z-index and child element will be on top of the parent refer example
- There are many such scenarios based on the stacking context
What is The stacking Context?
- The stacking context is a three-dimensional conceptualization of HTML elements along an imaginary z-axis relative to the user's view of webpage.
- To Understand better about the stacking context(how the elements are stacked) refer