CSS Z-index

CSS Z-index

The CSS z-index property controls the stacking order of positioned elements on a web page. It determines which elements should be positioned in front or behind other elements. The higher the z-index value, the closer the element is to the viewer.

Here is an overview of how the z-index property works:

  1. z-index only applies to elements with a position value of relative, absolute, or fixed. Elements with a static position (the default) are unaffected by z-index.
  2. Elements with a higher z-index value will appear in front of elements with a lower value. If two elements have the same z-index, the one appearing later in the HTML markup will be on top.
  3. Negative z-index values are allowed. Elements with a negative z-index will be positioned behind elements with a positive value or elements with the default z-index of 0.
  4. z-index is relative to the stacking context. Each positioned element creates a new stacking context, which means the z-index of an element is only compared to other elements within the same stacking context. Elements in different stacking contexts are completely independent of each other.
  5. Stacking contexts are created by elements with a position value other than static, and also by elements with a transform, opacity, filter, or will-change property set to anything other than none.
  6. Stacking contexts can be nested. A child element with a higher z-index within a parent stacking context will be positioned above other siblings within the same parent stacking context.
  7. In a document tree, the root element (usually <html>) forms the initial stacking context with a default z-index of 0. This means elements positioned within the root element will be stacked in relation to each other.

It’s important to note that the z-index property only affects elements that have overlapping content. If elements are not overlapping, the z-index value has no effect.

Here’s an example of how the z-index property can be used:

.container {
  position: relative;

.element-1 {
  position: absolute;
  z-index: 2;

.element-2 {
  position: absolute;
  z-index: 1;

In this example, element-1 will appear in front of element-2 because it has a higher z-index value.

Remember to use z-index with caution as it can sometimes lead to unexpected results or conflicts.

Leave a Reply

Your email address will not be published. Required fields are marked *

Popular Features
Popular Services/

Website Development & Design

App Development & Design

Graphic Design

Digital Marketing

SEO (Search Engine Optimization)

SMM (Social Media Marketing)

Cyber Security


GLOTRU Founder & CEO : __Azam

Registared : Trade,MSME,etc

Board of Director


About Us

Contact Us

Privacy Policy

Return & Refund Policy

Abuse Policy

Copyright Policy

Cookie Policy

Terms & Conditions

Universal Terms of Service





Press Releases

Our Investments






Digital Millennium Copyright Act
DMCA.com Protection Status


Content similarity detection
Protected by Copyscape




Follow Us :


SECURE SERVER : [Legal] [Privacy Policy] [Universal Terms of Service] [Do not sell my personal information]

SITE HOSTED : GLOTRU SECURE SERVER Asian Data Centre [You can host your site][Click Here]

SSL : Server Type : [Cloudflare] Certificate Issued By : [Let's Encrypt] Signature Algorithm : [ECDSA with SHA-384]

SITE BUILD SOFTWARE : Content Management System (CMS) Softwere