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