jQuery - 父 div 内的随机定位 div

Question

我的问题如下:

我有三个不同类的 div，它们在一个更大的容器 div 中。
刷新页面后，有什么办法可以让它们在父div中随机定位？
使用下面的代码我几乎可以实现这一点，但有时一些 div 会从主 div 中掉出来。
任何帮助将不胜感激。

$(".img-1, .img-2, .img-3").each(function(index) {
  $(this).css({
    left: Math.random() * ($(".main").width() - $(this).width()),
    top: Math.random() * ($(".main").height() - $(this).height())
  });
});

.main {
  width: 512px;
  height: 512px;
  background-color: yellow;
}

.img-1 {
  width: 128px;
  height: 128px;
  background-color: blue;
}

.img-2 {
  width: 64px;
  height: 64px;
  background-color: green;
}

.img-3 {
  width: 32px;
  height: 32px;
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
  <div class="img-1"></div>
  <div class="img-2"></div>
  <div class="img-3"></div>
</div>

Answer 1

您需要为 .img-X DIV 指定 position: absolute;，这样它们的位置将是相对于最近定位的祖先的绝对位置。然后你必须为 .main 使用 position: relative; 以便它满足该标准。

$(".img-1, .img-2, .img-3").each(function(index) {
  $(this).css({
    left: Math.random() * ($(".main").width() - $(this).width()),
    top: Math.random() * ($(".main").height() - $(this).height())
  });
});

.main {
  width: 512px;
  height: 512px;
  background-color: yellow;
  margin-top: 25px;
  position: relative;
}

.img-1 {
  width: 128px;
  height: 128px;
  background-color: blue;
  color: white;
  position: absolute;
}

.img-2 {
  width: 64px;
  height: 64px;
  background-color: green;
  color: white;
  position: absolute;
}

.img-3 {
  width: 32px;
  height: 32px;
  background-color: red;
  color: white;
  position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
  <div class="img-1">1</div>
  <div class="img-2">2</div>
  <div class="img-3">3</div>
</div>