CSS Z-index Lesson - 36

CSS z-index is a property that determines the stacking order of elements on a web page. It is primarily used to control how elements are visually layered on top of each other when they overlap in a two-dimensional space, such as when you have multiple HTML elements positioned on the same part of a webpage.
Here's how z-index works:
Stacking Contexts: Elements are rendered in what is called a "stacking context." Each stacking context has its own z-axis, and elements within the same stacking context are stacked relative to each other based on their z-index values.
Default Stacking Order: By default, elements have a z-index value of auto, which means they participate in the stacking order based on their position in the HTML document and the order in which they are rendered.
Positive Integers: You can assign positive integer values to the z-index property to control the stacking order. Elements with higher z-index values are stacked on top of elements with lower values. For example, an element with z-index: 2 will be placed on top of an element with z-index: 1.
Negative Integers: You can also use negative integer values for z-index. Elements with lower (more negative) z-index values will be stacked on top of elements with higher (less negative) values.
Stacking Order with Same z-index: If two or more elements have the same z-index value within the same stacking context, their stacking order will be determined by their position in the HTML document and the order in which they are rendered.
Position Property: To use z-index, an element must have its position property set to something other than the default value static. Common values for the position property are relative, absolute, and fixed. The position property determines how an element is positioned within the document flow and affects how z-index is applied.
Here's a basic example:
.box1 {
position: relative;
z-index: 2;
}
.box2 {
position: relative;
z-index: 1;
}
In this example, box1 will be stacked on top of box2 because it has a higher z-index value.
It's important to note that z-index values are only relative to elements within the same stacking context. Creating a new stacking context (often done with properties like transform, opacity, or will-change) can affect the stacking order and how z-index values are interpreted.
Additionally, using extremely high or low z-index values can sometimes lead to unexpected behavior or performance issues, so it's important to use them judiciously and consider other CSS techniques when designing your layout.

[@srinithi.s7344]

Super bro🎉