javascript - 将 append 的相关元素保留在正文中

Question

我正在尝试将 div 添加到具有页面宽度和高度的随机位置，它可以工作，但 div 放置在页面下方或左侧的位置非常远。我使用了 screen.width、screen.availWidth 和 document.body.clientWidth，但我无法弄清楚。我认为部分原因是 div 的定位。

这是我的代码

$(document).ready(function() {
	var i = 1;
	function createDiv() {
		setTimeout(function() {
			var $newDiv = $('<div></div>').css({
				"position": "relative",
				"width": "100px",
				"height": "100px",
				"background-color": "#ccbfd9",
				"border-radius": "720px"
			});
			$($newDiv).each(function() {
			 // document.body.clientHeight
				var leftRandPos = Math.floor((Math.random() *  window.innerWidth));
		var topRandPos = Math.floor((Math.random() *  window.innerHeight));
				$(this).css('left', leftRandPos);
				$(this).css('top', topRandPos);
				$('body').append($newDiv);
			});
			i++;
			if (i < 100) {
				createDiv();
			}
		}, 250);
	}
	createDiv();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

有什么建议吗？

Answer 1

绝对位置就是您要找的。

position: absolute;
top: some px;
left: some px;

进入页面中心(只是为了好玩):

 top: 50%;
 left: 50px;
 margin-left: -50px; //half of it's width
 margin-top: -50px; //half of it's height