javascript 动态更改相对左上角的 div 位置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13956540/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change div position relative top left dynamically
提问by PeteTheGreek
I'm trying to change a divs position (top, left) when I hover over a LI. Here's what i'm using, it seems to set the position:relative but it does not add or change the top or left elements.
当我将鼠标悬停在 LI 上时，我试图更改 div 位置（顶部、左侧）。这是我正在使用的，它似乎设置了 position:relative 但它不会添加或更改顶部或左侧元素。
It gets the XX and YY values from this html:
它从这个 html 中获取 XX 和 YY 值：
<li value="9" xx="10" yy="10"><a href="#">Content Here</a></li>
$(function(){
$("div.listcol ul li").bind("mouseover",function(){
$("div.cutaway-text").hide();
$("div.cutaway-image img").hide();
$("div.cutaway-image img#img"+this.value).show();
var top2 = 0;
var left2 = 0;
top2 = $(this).attr('xx');
left2 = $(this).attr('yy');
$(".highlighter").css('position', 'relative');
$(".highlighter").css('top', top2);
$(".highlighter").css('left', left2);
//var d = document.getElementById('highlighter');
//d.style.position = "absolute";
//d.style.left = left;
//d.style.top = top;
//document.getElementById("div.highlighter").style.left = left2;
//document.getElementById("div.highlighter").style.top = top2;
//console.log(this.value);
});
});
The commented out lines are what I have tried/played about with already, thanks.
注释掉的行是我已经尝试/玩过的，谢谢。
Edit: here's jsfiddle http://jsfiddle.net/SWXgb/
编辑：这里是 jsfiddle http://jsfiddle.net/SWXgb/
回答by jfrej
You need to add 'px' to your topand leftvalues like this:
您需要将 'px' 添加到您的top和left值中，如下所示：
$('.highlighter').css({ top : top2 + 'px', left : left2 + 'px' });
See working demo.
请参阅工作演示。
回答by Daniel Attfield
Take a look at this modified fiddle: http://jsfiddle.net/SWXgb/6/
看看这个修改过的小提琴：http: //jsfiddle.net/SWXgb/6/
Things I noticed:
我注意到的事情：
- Your first
<li>tag doesn't have anxxattribute, it hastopinstead. - You hadn't specified 'px' or 'em' values to qualify the
topandleftvalues in your JavaScript. - The child div (with class highlighter) was set to
position: relative, if you want it to be positioned in relation to the parent div, you'll needposition: relativeon the rollover-image, andposition: absoluteon the child.
- 您的第一个
<li>标签没有xx属性，而是有top。 - 您没有指定 'px' 或 'em' 值来限定JavaScript 中的
top和left值。 - 子 div（带有类highlighter）设置为
position: relative，如果您希望它相对于父 div 定位，则需要position: relative在rollover-image和position: absolute子级上。
回答by algorhythm
OK, I have an idea.
好的，我有个主意。
CSS: top, left, right and bottom are just working, if position is 'absolute'... Use margin-top, margin-left, margin-right and margin-bottom when position is relative.
CSS: top, left, right and bottom 只是工作，如果位置是“绝对”...当位置是相对的时，使用 margin-top, margin-left, margin-right 和 margin-bottom 。
Or, make the parent-container to position relative, to have the absolute position starting at the first relative-parent ;)
或者，将父容器设置为相对位置，以从第一个相对父级开始绝对位置；)
