1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Alternative to z-index in css

Discussion in 'CSS' started by cryoffalcon, Jan 9, 2012.

0
  1. #1
    Hi,
    well i am using a lightbox that is made up of css and jquery. In it i am using z-index to display the lightbox above the content in my site. But now i want to get rid of this z-index as it is creating issues for me so i would be glad if there is a alternative to it in css or javascript or jquery or anything.

    *Don't read the lower paragraph if you don't want to know why am i asking for an alternative to z-index, thank you :p*

    Those wants to know what is the problem that i am willing to get rid of z-index, well the problem is that, i am using flash games in that popup i didn't added a wmode to it, as if add wmode to it, the games processing speed is effected. I am also using wibya bar that i want to display above the games which are in lightbox, for this simple method is to use z-index i used it and it works too but it doesn't work in chrome if i haven't added wmode as opaque, in chrome the wibya bar appears under the game, until i add wmode opaque to the game then the bar apppears above the game but as a result the game stops working in good speed and one can feel it.
    well i can see the explanation is little bit complicated, in simple terms when wmode is added to a game and z-index is used too then chrome makes shit out of the game. If wmode is used but z-index is not used the game stay okay in chrome. So that's why i want to get rid of z-index so that games start working okay.

    Sorry for making you read this long. I would be glad to receive help ^_^
     
    cryoffalcon, Jan 9, 2012 IP
  2. JamesD31

    JamesD31 Peon

    Messages:
    36
    Likes Received:
    0
    Best Answers:
    1
    Trophy Points:
    0
    #2
    Um, why would z-index be giving you problems? As far as I know it's a standard now and if it is because you are giving a bunch of things z-index (which I don't suggest) just make it some outrageous amount of 9999 (good number to use for pop-ups and stuff).

    Though, what you can do, for pages that don't have any elements with z-index, is make the jQuery append the pop-up to the end of <body> as HTML/DOM will automatically 'stack' elements in the order for which they come. So, top down, and nested over nested - if that makes sense.
     
    JamesD31, Jan 11, 2012 IP
  3. cashcars

    cashcars Peon

    Messages:
    112
    Likes Received:
    0
    Best Answers:
    1
    Trophy Points:
    0
    #3
    The problem is IE. When I try to set position relative, the overflow:hidden
    will not work anymore in IE. What happends is that the blue center div gets displayed incorrect, or it flows below the footer. It will flow all the way down to the bottom of the screen.Rather then stopping behind the footer as the markup stands now.
    And I have found no way of of stopping this, so my layout breaks if I put position:relative; to content.
    Is it safe to mix em and % width like that? And how will I now what width to give content column if I set a fixed width in em for the leftnav?
     
    cashcars, Jan 13, 2012 IP
  4. cryoffalcon

    cryoffalcon Peon

    Messages:
    102
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Well i wish i had known why is the error occurring but all that i was able to do is to find out who is responsible for doing this after performing various tests and the one i put blame on is z-index, maybe z-index is innocent and the popup that i created is a weak one which is not good to support flash. But i don't have any choice as the popup that i have it has the ability of staying full screen no matter what resolution or browser. So i can't replace popup but to replace z-index. I was think will it help if i give z-index to everything that stays below the popup? and i gave the z-index as 9999999 which is good large number and then i reduced it too but changing numbers making it auto inherit or other stuff doesn't help.
    If you could guide me how to use jquery to replace z-index it would really be nice ^_^ as i can use jquery but i can't write as that's my weak area :p
     
    cryoffalcon, Jan 13, 2012 IP
  5. JamesD31

    JamesD31 Peon

    Messages:
    36
    Likes Received:
    0
    Best Answers:
    1
    Trophy Points:
    0
    #5
    Z-index is only to determine what falls on what (like a stack of papers). It has little to do with coliding issues with the HTML. Your problem probably lies with the position:relative.

    That basically forces that object to do exactly that, be relative to its surroundings. So it is kind of like a float, just not float? Hard to explain. What you probably want with any pop-ups (usually) is have a position: absolute. What THIS does is makes it be in those exact spot (within whatever container div you have it under, if it's under <body> than the whole page, if it's inside of a div, than the top left corner of that div is 0,0) and you can move that new element with the margins (negative margins work as well for the top / left margins to "pull" them in that direction).

    Try changing the position to absolute, give it a shot. Note that Flash does a weird thing with z-position and it does not like to follow it properly. Your cure is to make sure the window mode.. aka wmode is set to opaque. Just add that to the param and embed and it will fix the problem (where the Flash player will always be on top of everything).
     
    JamesD31, Jan 14, 2012 IP