CSS CSS Tutorial CSS Advanced CSS Responsive Web Design(RWD) CSS Grid CSS Properties Sass Tutorial Sass Functions



z-index

Z-Index is a CSS property that determines the stacking order of elements on a web page. It is used to control the visibility and overlapping of elements on a web page. The z-index property is used to specify the order in which elements are stacked on top of each other. The higher the z-index value, the closer the element is to the viewer and the more visible it is.

The z-index property is used to control the stacking order of elements on a web page. It is a numeric value that can be positive, negative, or zero. The default value of z-index is auto, which means that the stacking order is determined by the order in which the elements appear in the HTML code. However, this can be overridden by setting a specific z-index value for an element.

Here is an example of how to use the z-index property:

<div style="position: absolute; z-index: 1;">This is the first element</div>
<div style="position: absolute; z-index: 2;">This is the second element</div>
<div style="position: absolute; z-index: 3;">This is the third element</div>

In this example, the first element has a z-index of 1, the second element has a z-index of 2, and the third element has a z-index of 3. This means that the third element will be on top of the other two elements, and the second element will be on top of the first element.

The z-index property can be used with any element that has a position property of absolute, fixed, or relative. If an element does not have a position property, the z-index property will have no effect.

Here is an example of how to use the z-index property with a relative position:

<div style="position: relative; z-index: 1;">This is the first element</div>
<div style="position: relative; z-index: 2;">This is the second element</div>
<div style="position: relative; z-index: 3;">This is the third element</div>

In this example, the elements are positioned relative to their normal position in the document flow. The z-index property is used to control the stacking order of the elements.

The z-index property can also be used with the CSS position property of fixed. This is useful for creating elements that are fixed in position on the screen, such as a navigation bar or a header.

<div style="position: fixed; top: 0; left: 0; z-index: 1;">This is the navigation bar</div>
<div style="position: relative; z-index: 2;">This is the content of the page</div>

In this example, the navigation bar is fixed in position at the top of the screen, and the content of the page is positioned relative to its normal position in the document flow. The z-index property is used to ensure that the navigation bar is always on top of the content.

It is important to note that the z-index property only affects elements that are positioned. If an element is not positioned, the z-index property will have no effect.

Here is an example of an element that is not positioned:

<div style="z-index: 1;">This element is not positioned</div>

In this example, the z-index property will have no effect because the element is not positioned.

The z-index property can also be used with the CSS position property of absolute. This is useful for creating elements that are positioned relative to their nearest positioned ancestor.

<div style="position: relative;">
  <div style="position: absolute; top: 0; left: 0; z-index: 1;">This is the first element</div>
  <div style="position: absolute; top: 0; left: 0; z-index: 2;">This is the second element</div>
</div>

In this example, the two elements are positioned relative to their nearest positioned ancestor, which is the outer div. The z-index property is used to control the stacking order of the elements.

Overall, the z-index property is a powerful tool for controlling the visibility and overlapping of elements on a web page. It is important to use it carefully and thoughtfully to ensure that the layout of the page is clear and easy to understand.

References

Activity