Положение DIV с использованием Jquery .position не работает

Question

У меня есть сообщение об ошибке, которое я хотел бы разместить над нарушающим элементом li. Я получаю положение элемента и пытаюсь поместить скрытый div и половину непрозрачности поверх него. Ниже то, что я имею до сих пор ..

сценарий

 function error_msg(error,id)
 {
 var p = $(id);
var position = p.position();
$(".overlay").css("left: " + position.left + ", top: " + position.top);
$(".overlay").width(p.innerWidth())  
$(".overlay").height(p.innerHeight())
$(".overlay").fadeIn();
 }  

(id - это идентификатор элемента li), это вычисляет правильную позицию, но игнорируется.

CSS

  div.overlay {
  font-size: 20px;
  margin-bottom: -1px;
  background-color: rgba(247, 40, 40, 0.6);
  z-index: 10000;     
  border-bottom: 2px solid #000;
  border-top: 1px solid #4a4b4d;
  }

Html

<ul>
<div class="overlay" style="position: absolute; display: none;" id="error_li" onClick="hideMsg()">some error message</div>
<li id="item_1">stuff</li>
<li id="item_2">stuff</li>
<li id="item_3">stuff</li>
<li id="item_4">stuff</li>
<li id="item_5">stuff</li>
</ul>

Когда это срабатывает, он всегда помещает div в верхнюю часть списка или позицию 0,0. Какие-нибудь подсказки, где я иду не так?

Answer 1

$(".overlay").css("left: " + position.left + ", top: " + position.top);

Эта строка недействительна. css не устанавливает атрибут style: он добавляет стили непосредственно к элементу.

У вас есть два способа сделать это. Первый - использовать несколько вызовов css (вы можете объединить их в цепочку для повышения производительности и читабельности):

$('.overlay').css('left', position.left).css('top', position.top);

Кроме того, вы можете передать объект в css:

$('.overlay').css({
    left: position.left,
    top: position.top
});

Поскольку это единственные свойства объекта position, вы можете даже передать это в:

$('.overlay').css(position);

Answer 2

Если вы используете Firebug, вы можете сделать console.log(position);, чтобы выяснить, правильно ли вы читаете позицию.