z-index Property

What is z-index

z-index is a css property that specifies the stack order of an element.  The stack order is based on the defined value. If an element has higher z-index, it’s in front of a lower z-index element. The default value is 0.
Note: z-index only works on positioned elements(absolute, relative, fixed)


tag {
    z-index: value;


Property Value Example Description
z-index auto z-index: auto; Sets the stack order equal to its parents. This is default
number z-index: 10; Sets the stack order of the element. Negative numbers are allowed
inherit z-index: inherit; nherits this property from its parent element

Browser Support

Most browser fully supports z-index property. IE7 doesn’t support the value “inherit”, IE8 requires !Doctype

Property compatible_ie compatible_firefox compatible_chrome compatible_safari compatible_opera
version 4.0 3.0 1.0 1.0 4.0


img {
    position: relative;
    left: 0px;
    bottom: 0px;
    z-index: 99;

One thought on “z-index Property

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s