SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict Zapppa's Avatar
    Join Date
    Aug 2009
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    need help with menu drop down (not coming on top of banner)

    Hi,

    I am trying to get a drop down menu to go over the banner I have for a site I am building: Home page

    I am stumped as to why the drop down goes under the banner.

    Is it something to do with z-index?


    Any help would be greatly appreciated.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,379
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Set position:relative on the nav and give it a higher z-index than anything that follows.

    e.g.

    Code:
    #nav {
      position: relative;
      z-index: 99;
    }

  3. #3
    SitePoint Addict Zapppa's Avatar
    Join Date
    Aug 2009
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You really are a saint! Thanks so much

    I owe you many times

    I had played with the z-index but wasn't sure why it wasnt working.

    Why does the position relative line fix this problem?

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,379
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Zapppa View Post
    You really are a saint! Thanks so much

    I owe you many times

    I had played with the z-index but wasn't sure why it wasnt working.

    Why does the position relative line fix this problem?
    z-index only applies to positioned elements. Therefore if the element is static then you need to add position:relative (without co-ordinates) and then you can apply a z-index as required.

    This has no visual effect on the element other than providing a stacking context for positioned children and to also allow a z-index to take effect.

    (Note that in IE7 and under its ultimately the positioned parent that controls the stacking level (contrary to the specs as positioned elements should be applied z-index auto by default but IE7 and under applies zero) so its no use increasing the z-index of a child of a positioned parent because it will have no effect outside its current context. It's the parent z-index that will control the stacking level with regards to elements outside the current context. )

  5. #5
    SitePoint Addict Zapppa's Avatar
    Join Date
    Aug 2009
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks very much


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
  •