javascript - 列表项点击使div出现在错误的位置

Question

所以我无法使用 javascript 将一个 div 绝对定位在另一个 div 之上。主图是背景图。我想点击一个列表项，使用 javascript 在该图像上添加一个 div。

$(document).ready(function() {
    //Carpet
    $('#gray').click(function(event) {
        $('.carpetArea img').remove();
        $('.carpetArea').html('<img style="opacity:0; margin-top:-20px;" src="http://192.185.2.154/~sogo/tempsourceoneevents.com/wp-content/uploads/2014/10/lightgray.png"/>');
        $('.carpetArea img').animate({opacity: '1', marginTop : '0px' }, 500);
    });
});

地毯图像的CSS

.carpetArea img {
    position:absolute; 
    zoom:1;
}

问题是单击时图像位于主图像下方。它应该从页面顶部稍微向下一点动画，以在背景图像上的地毯上排列。

完整代码

$(document).ready(function () {
  //Carpet
  $('#gray').click(function (event) {
    $('.carpetArea img').remove();
    $('.carpetArea').html('<img style="opacity:0; margin-top:-20px;" src="http://192.185.2.154/~sogo/tempsourceoneevents.com/wp-content/uploads/2014/10/lightgray.png"/>');
    $('.carpetArea img').animate({
      opacity: '1',
      marginTop: '0px'
    }, 500);
  });
});

.babBGD {
  background: url("http://192.185.2.154/~sogo/tempsourceoneevents.com/wp-content/uploads/2014/10/booth.jpg") repeat scroll 0 0 transparent;
  height: 612px;
  margin: 0 auto;
  position: relative;
  width: 1112px;
}
.carpet {
  height: 118px;
  left: 35px;
  position: absolute;
  top: 132px;
  width: 185px;
  z-index: 1;
}
.carpet ul {
  list-style: none outside none;
  margin: 0;
  padding: 0;
}
.carpet ul li {
  cursor: pointer;
  display: block;
  float: left;
  height: 34px;
  margin-bottom: 7px;
  margin-right: 2px;
  text-indent: -5000px;
  width: 34px;
}
.table {
  height: 116px;
  position: absolute;
  right: 28px;
  top: 134px;
  width: 185px;
  z-index: 1000;
}
.table ul {
  list-style: none outside none;
  margin: 0;
  padding: 0;
}
.table ul li {
  cursor: pointer;
  display: block;
  float: left;
  height: 34px;
  margin-bottom: 7px;
  margin-right: 2px;
  text-indent: -5000px;
  width: 35px;
}
.carpet-color {
  position:absolute;
  zoom:1;
  z-index: 100;
}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="babBGD">
  <div class="carpet">
    <ul>
      <li id="gray">Gray</li>
    </ul>
  </div>
</div>
<div class="carpetArea carpet-color"></div>

Answer 1

看起来你唯一需要做的就是将 .carpetArea 移动到 .babBGD 容器中，使地毯相对于它的位置:

<div class="babBGD">
    <div class="carpet">
        <ul>
            <li id="gray">Gray</li>
        </ul>
    </div>
    <div class="carpetArea carpet-color"></div>
</div>

演示:http://jsfiddle.net/w0x0vz56/6/