jquery - 为什么我的CSS和div无法正常工作？

我希望id="#div3"独立工作，但它仅跟随id="#div1"。如何使我的第三个div独立于第一个div？ Here is a JSFiddle demo。您可以看到div3阴影由于div1而下降。

另外，当我更改div3边距时，它也会同时更改div1和div2边距。

另外，我不希望页面向下滚动；我希望我的图像（在div3中）保持在右下角的位置。

<div id="div1">
    <div id="div2" align="center"><div>
</div>
<div id="div3"></div>

#div1
{
height:190px;
margin-top:-310px;
margin-left:-10px;
width:101%!important;
background-image:url("misty_2copy.jpg");
position:relative;
box-shadow:0px 0px 10px black;
z-index:6000;
}

#div1:hover
{
box-shadow:0px 0px 10px teal;
}

#div2
{
height:190px;
margin-top:-10px;
margin-left:-810px;
background-image:url("Untitled-12.png");
background-repeat:no-repeat;
position:relative;
z-index:6500;
}

#div3
{

margin-top:210px;
margin-left:60%;
height:590px;
background-image:url("Untitled-3.png");
background-repeat:no-repeat;
position:relative;
}

 $(document).ready(function()
 {
    //$("#div2").toggle();
    $("#div1").animate(
    {
        marginTop:000
    },1500,function()
    {
            $("#div2").animate(
    {
    marginLeft:400
    },500,function()
    {});
    });
});

最佳答案

那是因为您没有正确关闭div标签：

<div id="div2" align="center"><div>
                         -----^