IE div positioning (stacking issue)

HTML & CSS
1

How can I make the #top div in this example properly overlay the #bottom div? At the moment, when I mouseover the box #top, the hover effect is only shown if your mouse enters the div without touching content of #bottom. You can prove this by mousing over from the bottom (no text, so it works) and then mousing over from the right (where you touch the text, and it doesn’t work).

What is the solution to make the #top overlay #bottom?

Thanks for any tips!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<title></title>
	<style type="text/css">
	body
	{
		padding: 0;
		margin: 0;
	}
	#bottom
	{
		padding: 0;
		margin: 0;
		position: relative;
		width: 100px;
		height: 60px;
		background: red;
		z-index: auto;
	}
	#top
	{
		width: 100px;
		height: 60px;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 20;
	}
		#top:hover
		{
			background: green;
		}
	</style>
</head>
<body>

<div id="bottom">I am the bottom div</div>
<div id="top"></div>

</body>
</html>
2

The box is overlaying the other box, it just so happens IE does a little spaz with the text.
There is nothing you can do about that.

3

Except, it isn’t overlapping. This is a simplified example, but in the actual scenario there is an onclick handler on the #top div; but you can’t get to it without trying to find a bleed with your mouse pointer.

There is nothing you can do about that.

Don’t say that! There must be a way to make it overlap fully! :smiley:

4

Your simplified example is failing the real scenario then. It is working on my machine.
Windows 7, IE 8 (tried in standard, compatibility, & quicks mode).

The top box correctly covers the red box with green on hover.

5

Yes, it is, but it is dependent on where your mouse enters the first div. If you enter it from the bottom, it works. If you enter it from the right (say next to the m of bottom), it doesn’t. I’ve got the same OS/browser setup as you.

This is the problem, but I don’t fully understand it or whether there is a solution.