关于div定位的问题。求教如何利用js改写div的left值！

Question

html代码：<div class="wrap" id="wrap">
……
    <div class="main" id="main">
          ……
    </div>
……
</div>
css代码：.wrap{padding:0px 5px;width:980px;margin:0px auto;}
.main{width:698px;background-color:#fff;padding:0px;position: absolute; z-index: 1; left: 400px; top: 240px;}
希望达到下图的效果：
结果，当浏览器窗口缩小时，<div class="main" id="main">跑到大框<div class="wrap" id="wrap">外面去了。查资料发现，position: absolute; z-index: 1; left: 400px; top: 240px;其中的left和top是相对于窗口，而不是相对于外层的div层边框。我的想法是，无论窗口大小怎么变化，或者不管在什么浏览器里，里面的div都保持上图的位置不变化，怎么实现？
或者说，怎么保持内层的div永远是左边距离外层div边框是400px？
改写css？还是利用js改写left值？望高手帮给点思路，感谢！JavaScriptCSSHTML浏览器

Answer 1

wrap设置position: relative
.wrap{padding:0px 5px;width:980px;margin:0px auto;position: relative;}

Answer 2

这样不行，直接使得<div class="main" id="main">跑到大框<div class="wrap" id="wrap">外面去了。

Answer 3

wrap设置position: relative之后、你再调整main的位置，
这样无论窗口大小怎么变化，里面的div都保持在外层div的相对位置

Answer 4

嘻嘻，我自己搞了一个临时解决方案：function autoleft(){//调整div“main”的左边位置
document.getElementById("main").style.left=document.getElementById("wrap").offsetLeft+265 + "px";
}
window.onresize=autoleft;//当改变窗口大小时，自动调用该函数大家看看还有没有其他更加巧妙的办法。感谢！

Answer 5

你用这代码试试看
.wrap
{
    padding: 0px 5px;
    width: 980px;
    height: 1000px;
    margin: 0px auto;
    border: 1px solid #003300;
}
.main
{
    width:689px;
    height:740px;
margin:100px 0px 0px 100px;
border: 1px solid #003300;
padding:0px;
}

Answer 6

1楼给的就是正确答案，absolute元素设置top，left是相对于最近的一个已经定位的祖先元素来定位的，你给wrap设置position:relative;以后，main就是相对wrap定位了。不需要用js这里