Position: Relative Overlap Error

HTML & CSS
1

Hi there,

I am having a weird overlapping error in my design.

Link 1: http://imageshack.us/photo/my-images/819/profileoverlap.jpg/
Link 2 (that’s a JQuery/Fancybox iframe): http://imageshack.us/photo/my-images/199/overlap2.png/

Here’s the CSS attributes on the top-layer element that’s burying everything:


table#p_cover {
	margin-top: -95px;
	z-index: 10000;
	position: relative;
}

Here’s the CSS attributes of the drop down navigation that’s being buried:


#nav {
	margin: 0 auto;
	width: 900px;
	height: 33px;
	background: url('http://static.eggcave.com/layout/headernav.jpg?1') no-repeat;
	zoom: 1;
}

Here’s the CSS attributes of the buried Fancybox iframe (pretty irrelevant):


#fancybox-frame {
position: relative;
width: 100%;
height: 100%;
border: none;
display: block;
}

How To Fix: Removing position: relative; from table#p_cover fixes the problem. But what happens is this (since it’s an overlay in the layout)…

http://img841.imageshack.us/img841/4526/overlap3.png

(notice the negative margin in table#p_cover)

So… there are kind of two problems going on at once. And I don’t know how to solve both. Any ideas? Please let me know if you require any additional information, as I am happy to provide that.

2

Try removing this instead:

z-index: 10000;

That’s the real problem.

3

That did the trick. Totally needed another set of eyes on the code… z-index. Duh!