Scrolling Container Issue in Internet Explorer 7
I stumbled upon a very interesting quirk in Internet Explorer 6 and 7, relating to relative-positioned child elements of a scrolling container.
Below, I have created a div which has the overflow attribute set to auto. Within this div is an unordered list having list elements with paragraphs positioned relatively. A very interesting thing happens when you do not add positioning to the scrolling container:
When content's overflow is scrolled, the paragraphs (or other elements) positioned relatively within the list tag appears to remain fixed, while the other scroll as expected!
Why does this happen? Internet Explorer looks for a positioned parent element on which to anchor the relative-positioned paragraph. If no parent element is found, the paragraph will be positioned relative to the body—which is the case here.
For a demonstration, make sure you're viewing this web page in IE7 and scroll the content below.
A Test
First Item
Second Item
Third Item
This is a paragraph tag outside of the list
This is an H4 tag
This is a spanThis is nothing.
Here's the code I used:
<style type="text/css">
#list_test{overflow:auto; width:300px; height:150px; border:1px solid red;}
#list_test li p{position:relative;}
</style>
<div id='list_test'>
<h3>A Test</h3>
<ul>
<li><p>First Item</p></li>
<li><p>Second Item</p></li>
<li><p>Third Item</p></li>
</ul>
<p>This is a paragraph tag outside of the list</p>
<h4>This is an H4 tag</h4>
<span>This is a span</span>
<br>This is nothing.
</div>
If I had added relative positioning to the #list_test selector, it would have worked as expected.