disappearence of fixed positioned box when scrolling

If you scroll down, the box to the right labeled "menu" will disappear. The HTML-Code for the box is:

<div class="menu">
	<p>
		menu
	</p>
</div>

And the relevant CSS code is:

div.menu {
	position:absolute; /* This is relevant */
	z-index:1; /* this too */

	/* the rest is just for optics */
	top: 50px; 
	left: 10px; 
}

div.menu p {
	position:fixed; /* This is relevant */
	height: 100px; /* the height changes how much you have to scroll down to make the box disappear */

	/* the rest is just for optics */
	border: 1px solid black;
	width: 50px;
	background: #CCC;
}

This bug is triggered by the fixed positioned box being contained by an positioned (position:relative or position:absolute) box wich also has an z-index.