Changing style.zIndex

Discussion in 'JavaScript' started by Tony Brar, Apr 16, 2013.

  1. #1
    Hi guys,

    How come this works as I want
    http://jsfiddle.net/fortninja/pB62j/16/
    But not this?
    http://jsfiddle.net/fortninja/pB62j/17/
    Normally, #userdropdownmenu is at -50 z-index.
    I want the user to mouse over #userdropdown and have the z-index of #userdropdownmenu go to 50.
    That way, a menu for the user's options can appear only when you hover over your username.
    Otherwise, it is behind everything else.
    At http://jsfiddle.net/fortninja/pB62j/16/, the menu goes behind the image (which is just there to show that the menu is behind it) and when you hover over the username, the menu goes over the top of the image.
    At http://jsfiddle.net/fortninja/pB62j/17/, the menu stays in the same place, under the image, where it should not be.
    Notice that in http://jsfiddle.net/fortninja/pB62j/16/ the positioning for #userdropdownmenu is absolute, while in http://jsfiddle.net/fortninja/pB62j/17/ #userdropdownmenu is relatively positioned.
    The reason I actually added the relative positioning is this:
    http://screencast.com/t/tSUbHCPO
    Apparently elements need to be positioned, so I positioned it.
    How can I make the effect in http://jsfiddle.net/fortninja/pB62j/16/ happen without the absolute positioning (I hate absolute positioning) that forces the element to be in a certain place?
    Can I just have the #userdropdown in http://jsfiddle.net/fortninja/pB62j/17/ go behind the image?
    Help is appreciated.

    Thanks,
    -Tony
     
    Tony Brar, Apr 16, 2013 IP
  2. Tony Brar

    Tony Brar Active Member

    Messages:
    220
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    75
    #2
    I understand now, no need to respond. :)
    Sorry if I wasted anyone's time.

    -Tony
     
    Tony Brar, Apr 19, 2013 IP