弹出图像右上角的定位关闭按钮

Question

How can I get the close button [x] http://bit.ly/uHrh3E in the top right handside of the pop up image?

    #shDisplay #shWrap #imgContainer {
    position:relative;
}


#shDisplay #shWrap #imgContainer > #clbtn >a {
    font-size:18px;
    margin-bottom:10px;
    color:#fff;
    text-align:right;
    right: 1%;
}

#shShutter *, #shDisplay * {
    padding: 0;
    margin: 0;
}
#clbtn{
    position: absolute; top: 0; right: 0;
    margin-bottom:10px;
}

D.innerHTML = '<div id="shWrap"><div id="imgContainer"><div id="clbtn">' + closebtn + '</div><img src="'+shutterLinks[ln].link+'" id="shTopImg" title="' + t.msgClose + '" onload="shutterReloaded.showImg();" onclick="shutterReloaded.hideShutter();" /></div>' + NavBar +'</div>';

I can't seem to get it working right.

Answer 1

Its relative simple, so if you put your button inside the div that contains the image, put on position: relative; on the container, and position: absolute; top: 0; right: 0; position: absolute; top: 0; right: 0; on your [X] .

Using position: relative on a container will make child elements be relative to that element, which can be quite handy - like for this particular example.