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

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

    The result shows like this


    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

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

    now the result will show like this

    498 x 327 - 71K
    492 x 282 - 74K

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