{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 淡お忘 的问题《Problem with position absolute in ie7, div moves 1》','https://www.manongdao.com/q-526558.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
ive got a problem on my position absolute property on IE7. My div moves 10px to the right. Below is my code. IE8 and 9 works fine. id menu is the div Im referring.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body{margin: 0 0 0 0; padding: 0 0 0 0;}
#holder{width: 400px; height: 500px; margin: 0 auto;}
#left{float: left; width: 50px; height: 500px; background-color: red;}
#center{float: left; width: 300px; height: 500px; background-color: green;}
#right{float: left; width: 50px; height: 500px; background-color: red;}
#header{width: 300px; height: 70px; background-color: yellow;}
#gal-holder{width: 280px; height: 70px; margin: 0 auto;}
#gallery{width: 280px; height: 410px; background-color: orange;}
#button{width: 400px; height: 45px; background-color: red; margin: 0 auto;}
#menu{width: 300px; height: 45px; background-color: pink; position: absolute; z-index: 1000; top: 100px;}
#content{width: 380px; height: 200px; margin: 0 auto; background-color: blue; padding: 10px; color: #fff;}
#clear{height: 10px;}
</style>
</head>
<body>
<div id="holder">
<div id="left"></div>
<div id="center">
<div id="header"></div>
<div id="menu"></div>
<div id="gal-holder">
<div id="clear"></div>
<div id="gallery"></div>
<div id="clear"></div>
</div>
</div>
<div id="right"></div>
</div>
<div id="button"></div>
<div id="content">Sample text</div>
</body>
</html>
Add
position:relativeto#centerand thenleft:0pxto#menu.Absolutely positioned elements are positioned relative to their closest positioned parent. It's best to give the items you want to position a left/right and top/bottom coordinate to prevent weird results like the one you found.
You should specify both the top and left positions and add
position:relativeto the immediate parent:And a live example: http://jsfiddle.net/ambiguous/vRJMd/
The default
leftisautoand that more or less means that the browser can do whatever it thinks is sensible. Also, absolutely positioned elements are positioned with respect to the nearest ancestor with a position that is notstatic(which is probably<body>in your case).