一开始回答的忘记父元素这个东西了， 可以全部用固定定位就可以了啊

div{border:2px red solid;}

#box1{

    width:200px;

    height:200px;

    position:relative;

}

#box2{

  position:fixed;

top:20px;

left:30px;

          top:700px;

}

/*下面是任务部分*/

#box3{

    width:200px;

    height:200px;

           position:fixed;

           top:0;

           left:250px;

}

#box4{

    width:99%;

  position:fixed;

bottom:0;

很简单不需要用到js， 直接把box1设置relative box3设置absolute  然后把box3设定的高删去 因为高度被定死了就不能移动了，同理box2和box4同上

首先问主说的偏移是什么意思，是指两个box的位置互相交叉吗？这个可以运用以后学习到的JS（JavaScript）语言来操作。说到底了还是更换id/class名称的。