列表项单击以使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;
}

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

完整代码

＆＃13;

＆＃13;

$(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);
  });
});

＆＃13;

.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;
}
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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/