为什么我的css和div工作不正常？

Question

我想id="#div3"独立工作,但接下来就是这样id="#div1".如何使我的第三个div独立于第一个div？ 这是一个JSFiddle演示.你可以看到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()
    {});
    });
});

Answer 1

那是因为你还没有正确关闭你的div标签:

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