html - 将关闭窗口图标扩展到模态 div 之外

Question

我可能犯了一些愚蠢的 CSS 错误。我无法让关闭窗口图标出现在模态窗口之外，它会在边缘剪掉。

http://jsfiddle.net/4bBx3/

<div id="sendMsgForm" class="modal">
    <div class="closeBtn" >
        <a href="#" onclick=""><img src="close-icon.png" alt="Close Form"></a>
    </div>
    (content)
</div>

.modal 
    {
    background: #EEE ;
    -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px;
    border:solid 1px #ccc; 
    padding: 0;
    overflow: auto;
    z-index: 1001;
    position: fixed;
    min-width: 300px;
    max-width: 400px;
    min-height: 250px;
    top: 20px;
    left: 20px;
    }

.closeBtn
    {
    display: block;
    float:right;
    position:relative;
    top:-10px;
    right: -10px;
    z-index: 1002;
    }

Answer 1

它被剪掉了，因为你在模态上设置了 overflow: auto;。将其更改为可见。

.modal {
    overflow: visible;
}

http://jsfiddle.net/4bBx3/3/