Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    May 2008
    Posts
    446
    Thanks
    23
    Thanked 5 Times in 5 Posts

    problem with css z-index in div

    I cant get an image to overlap another.

    Here is my html:

    Code:
    <div class="item-image-big" >
    			<a href="image.png">
    			<img alt="title" src="image.png" width="356" />
    			<img src="icon.png" class="full-size-image" alt="Expand Image" /></a>
    			
    			
    </div>
    here is my css for the two classes:

    Code:
    .item-image-big {
    
    	position: relative;
    
        display: inline;
    
        margin: 3px 0 12px;
        width: 356px;
    
    }
    
    .full-size-image {
    
    	position: relative;
    	right:5px;
    	bottom:0px;
    	z-index: 1;
    }
    The icon.png I am trying to appear bottom right ontop of the other image.


    Thanks a lot for your help

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Try
    Code:
    .full-size-image {
    
    	position: absolute;
    	right:5px;
    	bottom:0px;
    	z-index: 10;
    }
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Regular Coder
    Join Date
    May 2008
    Posts
    446
    Thanks
    23
    Thanked 5 Times in 5 Posts
    Thanks for the reply, I have found that when I make the position absolute the element wont stay in the div, it considers the entire page its playground. How can I combat this problem?

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello surreal5335,
    The parent element needs to be position: relative; so your absolute positioned element stays with the parent.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •