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的元素id）这确实计算了正确的位置但忽略了它。

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);进行判断。

使用Jquery .position的DIV位置似乎不起作用

2 个答案: