SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2010
    Posts
    79
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Position: Relative Overlap Error

    Hi there,

    I am having a weird overlapping error in my design.

    Link 1: http://imageshack.us/photo/my-images...leoverlap.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:

    Code css:
    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:

    Code css:
    #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):

    Code css:
    #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. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,597
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Try removing this instead:

    z-index: 10000;

    That's the real problem.

  3. #3
    SitePoint Enthusiast
    Join Date
    Mar 2010
    Posts
    79
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That did the trick. Totally needed another set of eyes on the code... z-index. Duh!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •