Overlapping issue - html

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):
<img src="xxxxx.png"> </img>
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.
You have gray div floated right
You want to center a green div in this
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;
}