CSS PHP错误div容器

I would like to know how I can realise the following idea:

I have a registration form. In case of a PHP error message, I would like to display a div beside each input field where the specific error message takes place. So at the moment I have the CSS problem to set that div in front of all other divs. So I started looking at Z-index, but for some reason that does not work.

I have in my css:

#form-error{
  background-color: #f23;
  z-index:1;
  width: 200px;
  height: 50px;
}

And in the HTML:

<?php if(isset($errors)):?>
  <?php foreach($errors as $error):?>
    <div id="form-error">
    <?php echo $error;?>
    </div>
  <?php endforeach;?>
<?php endif;?>

So I'm very interested in ideas on how to solve this.

Thanks a lot.

UPDATE

with the help of the user deflect i recognized that i should add a position statement. i did so. now i have all error messages listed down.

this user mentioned that it would be better to reoganize my php logic to have one specific errormessage that i just have to add into a box of class form-error beside the input field. this is not the problem. i can get each errormessage from an array. my problem is, how to realize that i have these boxes beside the input fields.

In order for z-index to work, you need to add in your css either position:relative;, position:absolute;, or position:fixed;.

I don't know what else might be the issue, but I would start by adding that to your CSS, like so:

#form-error{ 
    position: relative;
    background-color: #f23; 
    z-index:1;  
    width: 200px; 
    height: 50px; 
}