Brad Brad - 7 months ago 12
HTML Question

Float a DIV on top of another DIV

I was recently assigned the job of copying a JS popup our previous web developer made. I've got it very similar yet there's one thing I can't get, for the close button (X) to float over the popup in the top right corner (rather than being sat on top right corner of the popup). I've tried with

position:
values in the CSS and other attributes I've found around Stack overflow, yet none seem to do the 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>

Answer

Just add position, right and top to ur 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*/
}