How to place my error message where I want it using JQuery

I just received help on a different issue but am now seeing another issue. I want to control where this error message is echoed. What I am seeing is that the message is being echoed at the very bottom of my screen and that isn't where I'd like it. How to control it?

    var div = $('<div>').attr('id', 'error').html('Cannot Be Blank').hide();
    $(div).addClass('ajax-error');
    $('body').append(div);
    $("#error").fadeIn(2500, function() {
      $(this).fadeOut(300, function() {
        $(this).remove();
      });
    });

---

Based on what Karim has been telling me, this is what I have come up with but it isn't working correctly. When I refresh the screen, I can only get a single error message to echo then it won't work again.

    var div = $('<div>').html('Cannot Be Blank');
    $(div).addClass('ajax-error');
    $("#error").append(div).fadeIn(2500, function() {
      $('#error').fadeOut(300, function() {
        $('开发者_运维百科#error').remove();
      });
    });

---

make the position absolute

$(div).addClass('ajax-error')
      .css('position', 'absolute')
      .css('left', '30px')
      .css('right', '50px');

you can use the position of the element if you can handle the event :

  offset = element.offset();
  $(div).css('position', 'absolute')
        .css('left', offset.left)
        .css('top', offset.top - element.outerHeight());

---

just set css for $('#error')

for example:

$('#error').css({'position':'absolute','bottom':'0px;});

---

Another option: Give your error message box a class and position it however you want with CSS.

It depends where you want the box appear.