详细

我正在动态设置定位绝对div的左侧和顶部值。该div处于循环中，因此其宽度，高度和位置以间隔n变化。（它基本上是一个div，每隔n秒出现在页面上的随机位置。）

我面临的挑战是这个div必须始终在父级内部，<body>标记在这种情况下。我将其设置为position:relative甚至overflow:hidden，但它无济于事。

这是让事情变得更轻松的小提琴。 Fiddle 1 outside the loop ，Fiddle 0 insdie the loop

您将看到，因为x和y值是随机生成的，所以div溢出。

我发现为了保持身体中的div，必须检索身高和宽度，并与父母一起计算以获得大小差异。 enter image description here 所以我可以使用像

这样的CSS

var heightdiff = parentHeight - divHeight;

var widthdiff = parentWidth - divWidth;

通过jQuery在css中

top: Math.floor((Math.random()*heightdiff)+0;

left: Math.floor((Math.random()*widthdiff)+0;

也许我犯了一个简单的错误，但我已经尝试了我能想到的一切。回顾一下我需要做的就是获得div的高度和宽度。

Answer 1

我修改了你的脚本：

http://jsfiddle.net/yMT56/1/

为什么使用文档作为基础？

var docw = $(document).width();
var doch = $(document).height();

使用正文

var docw = $('body').width();
var doch = $('body').height();

或者更好，div的父级（要求你在之前将div添加到容器中）：

var docw = $newdiv.parent().width();
var doch = $newdiv.parent().height();

这里的问题是div没有内容，因此在你计算它时没有宽度和高度。所以我在开头创建它（注意我在html部分添加了<body>标签：我不知道fiddlejs如何处理这种情况）：

$newdiv = $('<div/>').css({
    'position':'absolute',
    'display':'block'
    }).html("Hi there, this should appear with in the body.<br/> Just wait it will overflow").appendTo( 'body' );
    //parent size, in this case body
    var docw = $('body').width();
    var doch = $('body').height();
     //calculating div size, before it's set, wrong!!
    var divh = $newdiv.height();
    var divw = $newdiv.width();

我还添加了一个Math.max控件，以确保结果不会为负数，尤其是在div大于其父级的情况下。

//positions for x and y
var posx = Math.max((Math.random() * (wdiff) +1).toFixed(), 0);
var posy = Math.max((Math.random() * (hdiff) +1).toFixed(), 0);

最后，只为div设置位置：

$newdiv.css({
    'left':posx+'px',
    'top':posy+'px'
}).fadeIn(2000).fadeOut(2000, function(){

也许使用该解决方案，将在循环开始之前显示第一个div。一个解决方案是使用visibility:hidden属性来隐藏div，但始终能够获得他的宽度和高度。

防止溢出绝对定位的动态div

详细

1 个答案: