如何定位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。所以，如果我改变左：10px到左：-90px大部分div消失在容器后面。我希望它能够超越tr及其容器。

我该怎么做？有什么指针吗？

Answer 1

容器还有一个父级，其中溢出被设置为隐藏，这导致了问题

Answer 2

您可以使用z-index它是一种“分层”CSS样式。

在容器上：z-index:0;

在弹出式窗口中：z-index:999;