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

如何获得弹出图像右上方的关闭按钮[x]

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

#shDisplay#shWrap#imgContainer{
位置：相对位置；
}
#shDisplay#shWrap#imgContainer>#clbtn>a{
字号：18px；
边缘底部：10px；
颜色：#fff；
文本对齐：右对齐；
右：1%；
}
#shShutter*，#shDisplay*{
填充：0；
保证金：0；
}
#clbtn{
位置：绝对；顶部：0；右侧：0；
边缘底部：10px；
}
D.innerHTML=''+closebtn+''+NavBar+''；

---

我似乎无法让它正常工作。

它相对简单，因此如果您将按钮放在包含图像的div中，请打开

位置：relative和
位置：绝对；排名：0；右：0[X]
上的code>

在容器上使用
position:relative
将使子元素与该元素相对，这非常方便-就像这个特定的示例一样。
您可以创建一个这样的示例吗？我已经更新了您的注释的代码，但它仍然不在右上角。。。知道我做错了什么吗？