how to use z-index in css
  • The z-index property specifies the stack order of an element.

    An element with greater stack order is always in front of an element with a lower stack order.

    Note: z-index only works on positioned like  (position:absolute, position:relative, or position:fixed).

    Example: i am inserting a image in html page

    <HTML>
    <BODY>
    <IMG src="1.jpg" width="500" height="300"/>
    <p> Welcome to coding Resolved </P>
    </BODY>
    </HTML>

    The result shows like this


    image

    But i want this text infront of image this will only possible by using z-index without using z-index the text will not come infront of image

    // Applying CSS

    <HTML>
    <STYLE>
    p
    {
    bottom: 192px;
        color: white;
        font-size: 28px;
        left: 91px;
        position: relative;
        z-index: 1;    
    }
    </STYLE>
    <BODY>
    <IMG src="1.jpg" width="500" height="300"/>
    <P> Welcome to coding Resolved </P>
    </BODY>
    </HTML>

    now the result will show like this



    image
    CutPicture.com_2013-May-16_08_54_16.jpg
    498 x 327 - 71K
    CutPicture.com_2013-May-16_09_08_29.jpg
    492 x 282 - 74K
    hussainroyal

Howdy, Stranger!

It looks like you're new here. If you want to get involved, or you want to Ask a new Question, Please Login or Create a new Account by Clicking below

Login with Facebook

Popular Posts of the Week

Optimum Creative