html - 如何定位 div 使其呈现在容器外部

Question

我正在尝试弹出带有错误消息的 div。标记如图所示

    .popup
{
    background: #7ABC45 none;
    border: 1px solid #7ABC45; border-radius: 5px; -moz-border-radius:5px;
    font-size: 8pt;  font-weight:bold;
    position: relative; bottom:4px; right:4px; z-index:2; 
}
.popuptop{height:7px; text-align:right; padding:0px 4px 2px 0;z-index:1;}
.popup-message { text-align:left; padding:3px 3px 3px 3px;z-index:1; }
.popup-shadow {background-color:#ccc;position: relative; bottom:4px; right:4px; border-radius:5px;-moz-border-radius:5px;z-index:1;}
.popupContainer{position:relative;z-index:1;}

#emailErrorAlert{position:absolute;top:-40px; left:10px;}
#duplicateEmailAlert{position:absolute;top:-40px; left:10px;}
#duplicateMobileAlert{position:absolute;top:-40px; left:10px;}

 <tr step="step1">
                                    <td class="grid_4">
                                        <span>My Mob No/Email is     </span><a href="#" style="font-size:8pt; padding-left:20px;">we protect your privacy</a>
                                        <div class="popupContainer">
                                            <div id="emailErrorAlert" style="display:none;">
                                                <div class="popup-shadow">
                                                    <div class="popup">
                                                        <div class="popuptop"><a href="#" class="closepopup">X</a></div>
                                                        <div class="popup-message"><p>Please Enter a Valid Email Or Mobile Phone Number</p></div>        
                                                    </div>
                                                </div>                           
                                            </div>                            
                                        </div>
                                        <div class="popupContainer">
                                            <div id="duplicateEmailAlert" style="display:none;">
                                                <div class="popup-shadow">
                                                    <div class="popup">
                                                        <div class="popuptop"><a href="#" class="closepopup">X</a></div>
                                                        <div class="popup-message"><p>You may provide just one email address</p></div>        
                                                    </div>
                                                </div>                           
                                            </div>                            
                                        </div>
                                        <div class="popupContainer">
                                            <div id="duplicateMobileAlert" style="display:none;">
                                                <div class="popup-shadow">
                                                    <div class="popup">
                                                        <div class="popuptop"><a href="#" class="closepopup">X</a></div>
                                                        <div class="popup-message"><p>You may provide just one mobile phone number</p></div>        
                                                    </div>
                                                </div>                           
                                            </div>                            
                                        </div>
                                    </td>                                    
                                </tr>

div 必须与字段相邻放置。我正在尝试使用绝对位置进行定位，如上面的 css 中所示，#duplicateMobileAlert。问题是 div 超出了 tr。因此，如果我将 left:10px 更改为 left:-90px，大部分 div 就会消失在容器后面。我想让它越过 tr 及其容器。

我该怎么做？任何指针？

Answer 1

容器还有一个父级，其中 overflow 被设置为 hidden，这是导致问题的原因