如何添加图像，重叠Bootstrap模式？

Question

我想添加关闭按钮，即重叠Bootstrap模式。

我在这里：

这就是我想做的事：

这是我的HTML：

 <div class="sign_up_header">
 <a class="close" data-dismiss="modal">
     <%= image_tag("/images/close_btn.png") %>
 </a>
 </div>

和CSS（尝试添加z-index并添加top：-5px，但它隐藏在模态之后）：

  .close{
      display: block;
      position: absolute;
      right:0px;
      top:0px
     }
  #sign_up{
border: 0;
width: 450px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding-bottom: 10px;
}

.sign_up_header{
padding-top:10px;
padding-left: 30px;
 }

来自Bootstrap模式的

CSS：

              .modal {
   position: fixed;
   top: 50%;
   left: 50%;
   z-index: 1050;
   width: 560px;
   margin: -250px 0 0 -280px;
   overflow: auto;
    background-color: #ffffff;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
      border-radius: 6px;
 -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
 -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
      box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
  -webkit-background-clip: padding-box;
 -moz-background-clip: padding-box;
      background-clip: padding-box;
     }

正如我在一些文章中发现的那样，我需要添加位置：绝对模态，但如果我这样做，它就不会被置于中心位置。

我怎么能这样做？

Answer 1

应用@James解决方案后，您必须将.modal属性overflow: auto更改为overflow: visible，让按钮超出模态，但这可能会导致意外行为。

Answer 2

要实现关闭按钮的重叠效果，请执行以下操作：

.close {
  display: block;
  position: absolute;
  right:-8px;
  top:-8px
 }

修改1

.modal {
   position: fixed;
   top: 50%;
   left: 50%;
   z-index: 1050;
   width: 560px;
   margin: -250px 0 0 -280px;
   overflow: visible;
   background-color: #ffffff;
   -webkit-border-radius: 6px;
   -moz-border-radius: 6px;
   border-radius: 6px;
   -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
   -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
   box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
   -webkit-background-clip: padding-box;
   -moz-background-clip: padding-box;
   background-clip: padding-box;
 }