POSITION:RELATIVE AND OVERFLOW IN INTERNET EXPLORER 7.0

I've been working on this layout that had a relatively positioned element inside a container with overflow. Everything looked good until I switched to IE7 and noticed that my positioned element remained fixed. Here's some code to demonstrate the problem:

 <div id="container">
   <div id="a"></div>
   <div id="b"></div>
 </div> 

And the related CSS:

 1 #container {
 2   height:100px;
 3   border:1px solid blue;
 4   overflow:auto;
 5 } 
 6 #a { 
 7   height:200px;
 8   background-color:lightblue;
 9   float:left;
   width:60px;
 } 
 #b {
   position:relative;
   height:200px;
   background-color:pink;
   width:60x; 
 } 

The key thing to notice in this CSS is the overflow set to the container, and the positioning set to element B. Here's a screenshot to demonstrate:

This overflow bug is documented well and exists in IE6 as well. To solve this, I added position:relative to the container. This seems to work for both IE6 and 7.

转：http://snook.ca/archives/html_and_css/position_relative_overflow_ie/