How to position div so that it renders outside container

I am trying to popup div with error messages. The markup is as shown

    .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>

The divs have to be positioned adjacent to the field. I am trying to position using absolute position as can be seen in css above for #duplicateMobileAlert. The problem is the div is getting cut beyond the tr. So if I change left:10px to left:-90px most of the div disappears behind the container. I want it to go over the tr and its container.

How can I do that? Any pointers?

The container further had a parent where overflow was set to hidden which was causing the issue

You can use z-index it is a "layering" CSS style.

On the container: z-index:0;

On the popup: z-index:999;