如何在右上角设置超出对话框边界的图像图标答案

【问题标题】：How to set the image icon on top right corner beyond the boundary of dialog如何在右上角设置超出对话框边界的图像图标
【发布时间】：2018-04-18 01:05:22
【问题描述】：

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

ps。我已经使用了“jquery-ui”和“jquery Modal”的对话框，它们都遇到了同样的问题。

【问题讨论】：

你能添加你的代码吗？我认为使用负边距应该可行吗？

标签： jquery css dialog modal-dialog

【解决方案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>

【讨论】：

【解决方案2】：

.wrapper {
  position: relative;
}

以上暗示children(.span)的绝对位置被限制在parent(.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>

【讨论】：