如何在对话框边界之外的右上角设置图像图标

Question

我想制作一个自定义的关闭按钮，但图像会被对话框的边界切割。有人能给我一个关于这种情况出了什么问题的提示。

PS。我使用了“jquery-ui”和“jquery Modal”这两个对话框，它们都有同样的问题。

Answer 1

试试这个

.main{
  border:1px solid #ddd;
  width:200px;
  height:150px;
  position:relative;
  maigin:0 auto;
}
.main span{
  position: absolute;
  right:10px;
  top:10px;
  background:#333;
  color:#fff;
  padding:5px;
  border-radius:20%;
}

<div class="main">
<span>X</span>
 <p>Lorem</p>
</div>

Answer 2

.wrapper {
  position: relative;
}

以上暗示子（.span）绝对位置仅限于父（.wrapper）

.span {
  position: absolute;
  top: 20px; /* move the top of .span */
  right: 20px; /* move the right of .span */
}

<div class="wrapper">
  <span class="span">X</span>
</div>