css - Float a DIV on top of another DIV -

i assigned job of copying js popup our previous web developer made. i've got similar yet there's 1 thing can't get, close button (x) float on popup in top right corner (rather being sat on top right corner of popup). i've tried position: values in css , other attributes i've found around stack overflow, yet none seem trick.

the css:

#popup {     position:absolute;     display:hidden;     top:50%;     left:50%;     width:400px;     height:586px;     margin-top:-263px;     margin-left:-200px;     background-color:#fff;     z-index:2;     padding:5px; } #overlay-back {     position : fixed;     top : 0;     left : 0;     width : 100%;     height : 100%;     background : #000;     opacity : 0.7;     filter : alpha(opacity=60);     z-index : 1;     display: none; } .close-image {     display: block;     float:right;     cursor: pointer;     z-index:3 } 

the html:

<div id="overlay-back"></div> <div id="popup">     <img class="close-image" src="images/closebtn.png" /><span><img src="images/load_sign.png" width="400" height="566" /></span> </div> 

just add position, right , top class .close-image

.close-image {     cursor: pointer;     display: block;     float: right;       z-index: 3;     position: absolute; /*newly added*/     right: 5px; /*newly added*/     top: 5px;/*newly added*/ }