Jquery 向固定到特定位置的模式弹出窗口添加关闭图标

我在一个非常简单的网站上触发了一个模式流行音乐，全白色纯色背景（不是图像）。css样式如下所示：

<style>
        #element_to_pop_up 
        {
             display:none;
             background-color:#ffffff;
             width:500px;
             height:250px;
             padding-left:20px;
             padding-right:20px;
             padding-top:20px;  
        }
    </style>

#元素到弹出窗口
{
显示：无；
背景色：#ffffff；
宽度：500px；
高度：250px；
左侧填充：20px；
右边填充：20px；
填充顶部：20px；
}

要关闭模态，可以单击模态限制之外的任何位置

我有一个简单的透明png“x”图标，我想把它悬停在右上角的这个区域上。它不需要任何特殊的编码，因为从技术上来说，点击它就是在模态的范围之外点击，这会关闭它

如何将此png添加为始终锁定在模态的右上角，但位于主类之外，因为我希望将其视为页面的“外部”或关闭触发区域？

考虑以下HTML：

<div id="element_to_pop_up">
    <span>X</span> // This part can be your image
</div>

JSFiddle：

---

试试看，如果有帮助就告诉我

设置绝对定位并将其放入具有相对定位的元素中。这（基本上）起作用。。我还有一个问题要问，这正好说明了我在css方面的相对拙劣。下面有两个div，其中包含显示消息的内容，位置正确，没有“X”。第二次我加上上面的“X”，它会“拉”它们。你能在我的小提琴里重现你的问题并把链接贴在这里吗？这样更容易理解。：）当我把我的提琴加到你的小提琴上时，它能正常工作。让我来处理一下，看看是否有其他css干扰它。div中的.net标签可能带有一些我不考虑的固有格式。没问题。如果你能重现这个问题，请告诉我。在其他情况下，如果此解决方案解决了您的问题，请记住接受它作为答案。：）

#element_to_pop_up {
    background-color:#000;
    width:500px;
    height:250px;
    padding-left:20px;
    padding-right:20px;
    padding-top:20px;
    margin: 30px;
    position: relative;
}

#element_to_pop_up span {
    position: absolute;
    right: -15px;
    top: -15px;
}