Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • z-index in CSS

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 454
    Comment on it

    Z-index Definition:-

    z-index property specifies stack order of any element or it only works for the positioning of an element i.e when position is absolute, relative and fixed.The vale of Z-index mostly used -1, 0 ,1 -1 is used for the positioning of element at background of any text and image while 0 or 1 take foreground position of the text/image.

    It determines the stack level of an HTML code. The stack level refers to the element position on z axis. Higher the vale of z-index the element will be more closer to the top of the stacking order.

    Using z-index for a text and image:

    image{
         position: absolute;
         left: 0px;
         top: 0px;
         z-index: -1;
           }
    image1{
         position: absolute;
         left: 40px;
         top: 0px;
         z-index: 0;
           }
    image2{
         position: absolute;
         right: 20px;
         bottom: 0px;
         z-index: 1;
           }
    

    You can understand from above code that how z-index is working on different values, when the value is -1 the element will be more closer to the top of stacking order. when the value of z-index 0 or 1 it will shown on foreground position.

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: