Twitter bootstrap modal z-index not working

Question

I ran in to a problem what i cant really solve.

I created a signup and login form, made a form validation error popup by my self, and its not really working.

i added a higher z-index to it than the modals but i would flow out of the box it ads an oveflor to it.

html

   <div class="m-controls">
      <label class="pull-left" for="identity">Email *</label>
        <input type="text" name="identity" class="pull-right" id="identity" />
        <div class="login_email_error"></div>
    </div>
    <div class="clear"></div>
    <div class="m-controls">
      <label class="pull-left" for="password">Password *</label>
        <input type="password" name="password" class="pull-right" id="password" />
        <div class="login_password_error"></div>
    </div>

css

.m-controls {
    position: relative;
}

.login_email_error p,
.login_password_error p {
    background: #fdfbe8;
    border: 1px solid #dfd8c4;
    color: #b74a46;
    text-align: center;
    padding: 5px 10px;
    font-size: 11px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    position: absolute;
    top: -2px;
    left: 330px;
    width: 290px;
    z-index: 1052;
}

and the modals z-index is z-index: 1050;

So could please someone give me a hint what i am missing?

Thank you

EDIT

Could be a problem with the js?

// login
        $('.login-form').on('submit', function(){
            var loginData = $(this).serialize();
            $.ajax({
                url: "<?php echo base_url(); ?>user/login",
                type: "POST",
                data: loginData,
                dataType: "json",
                success: function(data)
                {
                    if(data.error == 0)
                    {
                        $('.login_email_error').append().html(data.identity);
                        $('.login_password_error').append().html(data.identity);

                    } else if(data.error == 1)
                    {
                        location.reload();
                    }
                }

            });

           return false;
        });

Answer 1

Hey now remove your p * tag * in your css style sheet as like this

  .login_email_error p,
.login_password_error p {
    background: #fdfbe8;
    border: 1px solid #dfd8c4;
    color: #b74a46;
    text-align: center;
    padding: 5px 10px;
    font-size: 11px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    position: absolute;
    top: -2px;
    left: 330px;
    width: 290px;
    z-index: 1052;
}

Into this

.login_email_error ,
.login_password_error  {
    background: #fdfbe8;
    border: 1px solid #dfd8c4;
    color: #b74a46;
    text-align: center;
    padding: 5px 10px;
    font-size: 11px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    position: absolute;
    top: -2px;
    left: 330px;
    width: 290px;
    z-index: 1052;
}

Live demo http://jsfiddle.net/MrzAS/2/

---

Updated demo http://jsfiddle.net/MrzAS/3/