Question

I am having an issue with overlapping items within a floating div. I must be applying the z-index wrong, but I’ve tried a few different things and I can’t get the two items to overlap. I have the following code (note: topLink and topIconNew divs are actually pngs):

http://jsfiddle.net/jhacks/neskB/7/

HTML:

<div class="topIcon">          

<div class="topIconNew"></div>
<div class="topLink"></div>

</div>  

CSS:

.topIcon{

border:1px solid black;
background-color:gray;
width:28px;
height:40px;
float:right;
position:relative;
}

.topLink{
background-color:green;
width:16px;
height:16px;
position:absolute;
    top:14px;
    left:6px;
    z-index;300;
 }    

.topIconNew{
background-color:red;
margin:30px 0px 0px 18px;
width:10px;
height:10px;
position:relative;
    z-index:350;
cursor:pointer;
}

The HTML for the pngs (if it makes a difference):

<a href="xxxxx.html"><img src="xxxxx.png"> </img> </a>

EDIT** I’ve done it! Finally. Thank you for the help… upon seeing your code I saw the use of absolute and relative together. I now have a better understanding over the usage of those things and now instead of positioning things with padding/margins, I’m using (and correctly so I’d assume) positioning. I feel stupid for doing what I was doing.

Answer 1

Thanks for the edits, your question is much more clear now. I think this will satisfy your question.

http://jsfiddle.net/neskB/26/

Okay, so this makes a lot more sense now.

1. You have gray div floated right
2. You want to center a green div in this
3. You want a red div in bottom right of green div

First I would change your html structure to this.

<div class="topIcon">                 
    <div class="topLink">
        <div class="topIconNew"></div>
    </div>                    
</div>  

Link will be positioned relative to its parent Icon.
New will be positioned relative to its parent, Link.

/* set topIcon to relative so that its child will be positioned relative to it */
.topIcon{     position: relative;   }

/* topLink is absolute positioned. We use top/left of 50% and negative margins to automatically center it */
.topLink{
    position: absolute;
    width:16px;
    height:16px;
    margin:-8px 0 0 -8px;
    left:50%;
    top:50%; 
}

/* New is positioned in bottom right of its parent */
.topIconNew{
    position:absolute;
    bottom:0px;
    right:0px;
}