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)

Syntax

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

Example


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

Using CSS3 to make rounded corner images

In this tutorial, we’ll use css3 to make a rounded corner for images. As described, css3 supports for IE9+, Chrome, FireFox, Safari and other browsers. You can check your browser support here.

Another problem is that border-radius property doesn’t work properly with images. It only works with div, span and other Html elements. Try this code:


<style type="text/css"> 
img{ 
    border: 4px solid #fff;
    -moz-border-radius: 30px; 
    -webkit-border-radius: 30px;
    border-radius: 30px;
}
</style>

We observe that by giving the border-radius property to the <img> tag the borders get rounded, but the image does not. The image flows out of the border.
rounded-corner-problem
To solve the above problem,

  1. Wrap the <img> element with a div tag which should be having the same dimensions (height and weight) as the <img> tag.
  2. To this wrapping div tag, specify the same original image as the background image.
  3. To the original image <img> tag, give the property “opacity: 0“.

Simply add the following html markup:


<div>
    <img src="images/test.jpg" alt="testing" />
</div>

and css:

<style type="text/css">
div{
    width: 550px;                                          /* Width same as the image width */
    height: 350px;                                         /* Height same as image height */ 
    background: url("images/test.jpg") no-repeat 0 0;      /* Background Image same as the Original image being wrapped by the div tag */
    border: 4px solid #fff;
    -moz-border-radius: 30px; 
    -webkit-border-radius: 30px; 
    border-radius: 30px;
}

img{
    opacity: 0;                                            /* Hide the original image being wrapped by the div tag */
}
</style>

Refresh your page and check it out.