joun98

网页在1280x800的分辨率下是正常的，但是如果高于这个分辨率，层就会向右偏移，如果低于这个分辨率，层就会向左偏移，这个是怎么回事？麻烦帮忙看下这个代码，谢谢

HTML 部分

<div class="blank" style="height:10px;"></div>


<style type="text/css">
#box1 a {background: url(/ad/1.png) 0 0 no-repeat;}
#box2 a {background: url(/ad/2.png) 0 0 no-repeat;}
#box3 a {background: url(/ad/3.png) 0 0 no-repeat;}
#box4 a {background: url(/ad/4.png) 0 0 no-repeat;}
#box5 a {background: url(/ad/5.png) 0 0 no-repeat;}

#box3 {left: 299px;}

#boxes {
  top: 750px !important;
}

</style>


<div id="boxes">

<div id="box1">
<a href="/" class="replace" title="Celebrate the weekend with an extra 40% off!"></a>
</div>

  <!-- box 2 -->
<div id="box2">
  <a href="/" class="replace" title="Shop Theory - up to 55% off!"></a>
</div>

    <!-- COGNITIVE MATCH TO MANAGE THIS PART -->
    <!-- box 3 -->
<div id="box3">
  <a href="/" class="replace" title="Shop our summer dress special - up to 65% off!"></a>
</div>

<div id="box4">
  <a href="/" class="replace" title="Our amazing shoe event arrives June 18th! Register now with THE OUTNET"></a>
</div>

<div id="box5">
  <a href="/" class="replace" title="Jayne Min talks about her refined tomboy style"></a>
</div>

</div>


-----------------------------------------------------------------------------------------------------

CSS 部分

#boxes {
    position: absolute;
  
    z-index:10;
    margin-left:11.5%;
   
}
#boxes div {
    height: 309px;
    position: absolute;
    width: 356px;
}
#boxes div:hover {
    position: relative;
    z-index: 100;
}
#boxes a {
    background-position: 0 0;
    display: block;
    height: 309px;
    position: relative;
    width: 356px;
}
#boxes a:hover {
    background-position: 0 -309px;
}

#box1 {
    left: 0;
    top: 0;
    z-index: 1;
}
#box2 {
    left: 114px;
    top: 222px;
    z-index: 2;
}
#box3 {
    left: 284px;
    top: 14px;
    z-index: 3;
}
#box4 {
    left: 451px;
    top: 264px;
    z-index: 4;
}
#box5 {
    left: 604px;
    top: 10px;
    z-index: 5;
}
#boxes #adbox {
    background: none repeat scroll 0 0 #F4F4F4;
    height: 250px;
    left: 620px;
    padding: 20px;
    top: 0;
    width: 300px;
    z-index: 5;
}
#boxes #adbox:hover {
    background: none repeat scroll 0 0 #000000;
}
#boxes #adbox a {
    height: 250px;
    width: 300px;
}
#boxes a.one:hover, #boxes a.two:hover, #boxes a.three:hover, #boxes a.four:hover, #boxes a.five:hover {
    background-position: 0 -309px;
}