Telerik blogs

Z-index demystified

by Atanas Korchev
July 02, 2009 Web, ASP.NET AJAX 0 Comments


In this blog post I will try to explain how CSS z-index works and a how to avoid a few common mistakes. First of all the z-index is used to control the z-order of positioned HTML elements. Simply put it controls the stacking order of HTML elements. To set it set the "z-index" CSS attribute of your element to some integer value.

 

Z-index works only for positioned elements

Positioned elements are elements whose "position" CSS attribute is set to "relative", "absolute" or "fixed". The default "position" is "static" which means that by default setting z-index has no effect.

Z-index is NOT measured in pixels

Z-index accepts only integer values. Setting it in pixels or percentage does not work.

Default stacking order when z-index is not set depends on element definition in the document

Consider we have two positioned HTML elements div1 and div2. If div2 is defined after div1 in the HTML document it will be higher in the stack than div1 if no z-index is set. Here is some sample code:

<html> <head> <style type="text/css">
    #div1,
    #div2{
        position: absolute;
    }
    
    #div1
    {
        width: 100px;
        height: 100px;
        top: 100px;
        background: red;
    }
    
    #div2
    {
        width: 100px;
        height: 100px;
        top: 150px;
        left: 50px;
        background: blue;
    }
    </style> </head> <body> <div id="div1">div1</div> <div id="div2">div2</div> </body> </html>

This is what the browser renders:

default-z-index

To put div1 on top of div2 we need to use the z-index. If we set the z-index of div1 to 1:

#div1
    {
        width: 100px;
        height: 100px;
        top: 100px;
        background: red;
        
        z-index:1;
    }

the page will look like this:

z-index-1

Z-index of child elements depends on z-index of parent elements

This is a common pitfall. Setting higher z-index of some child element will do nothing if its parent has low z-index. Here is an example (child1 has its z-index set index set to 100000):

<!DOCTYPE html> <html> <head> <style type="text/css">
    #div1,
    #div2{
        position: absolute;
    }
    
    #child1{
        position: absolute;
        width: 80px;
        height: 80px;
        background: yellow;
        z-index:100000;
    }
    
    #child2
    {
        position:absolute;
        width: 80px;
        height: 80px;
        background: green;
    }
    #div1
    {
        width: 100px;
        height: 100px;
        top: 100px;
        background: red;
        z-index:1;
    }
    
    #div2
    {
        width: 100px;
        height: 100px;
        top: 150px;
        left: 50px;
        background: blue;
        z-index:2;
    }
    </style> </head> <body> <div id="div1">div1
            <div id="child1">
                child1
            </div> </div> <div id="div2">div2
          <div id="child2">
                child1
          </div> </div> </body> </html>

Here is the output:

child-default-z-index

Child1 is below child2 even though its z-index is 100000. The key here is that div2 (the positioned parent of child2) - has higher z-index than div1 (the parent of div2). To make child1 appear on top of child2 (and div2) we have to decrease the z-index of div2 so it is less than div1:

    #div2
    {
        width: 100px;
        height: 100px;
        top: 150px;
        left: 50px;
        background: blue;
        z-index:0;
    }

Here is the final output:

child-z-index

RadControls for ASP.NET Ajax and their z-indexes

RadControls for ASP.NET Ajax are rendered using HTML and CSS so they fully obey to the rules mentioned above. To control the stacking order of RadControls you still need to use the z-index. Some of our controls come with a predefined z-index. You can find the complete list z-index help topic.

 

I hope this helps.

ASP.NET, Web Forms
About the Author

Atanas Korchev

 is Team Leader in Kendo UI Team

Comments

Comments are disabled in preview mode.