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

Question

如何在弹出图像的右上角获得关闭按钮[x] http://bit.ly/uHrh3E ?

    #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>';

我好像不能使它正常工作。

Answer 1

它相对简单，所以如果你把按钮放在包含图像的div中，把position: relative;放在容器上，把position: absolute; top: 0; right: 0;放在[X]上。

在容器上使用position: relative将使子元素相对于该元素，这非常方便-就像这个特定的示例。