Google-chrome – Chrome specific issue with z-index and flash

flashgoogle-chromez-index

I'm trying to get an absolutely positioned DIV to display in front of a Flash object; I can get this to work in every browser except Chrome.

There are a couple of similar questions on here, but nothing pertaining to a problem with Chrome specifically. I've tried several of the suggested solutions, such as setting the 'wmode' param to 'transparent', and setting z-indexes for both the flash object and the div, but nothing seems to work.

To see this in action:

www.mapcrunch.com

There is some green text: "Click here to begin", which should appear in front of the Street View panorama. In Chrome, you can see that the DIV appears in the correct position, but is then obliterated by the Flash object.

This issue is driving me nuts, and any advice would be greatly appreciated.

Best Answer

Actually, have you looked at the other 'wmode' available? I think there's a "normal" value too, which if I recall correctly will set your Flash object flat on a layer (like it should :P) in its current container.

So just make sure its within it's own DIV tag too and has a z-index setup as well.

HTML Flash embedding ain't really something I do on a daily basis (even less tested in Chrome) but hopefully this will shed some light.

Related Solutions

Html – Minimum and maximum value of z-index

http://www.w3.org/TR/CSS21/visuren.html#z-index

'z-index'

Value: auto | <integer> | inherit

http://www.w3.org/TR/CSS21/syndata.html#numbers

Some value types may have integer values (denoted by <integer>) or real number values (denoted by <number>). Real numbers and integers are specified in decimal notation only. An <integer> consists of one or more digits "0" to "9". A <number> can either be an <integer>, or it can be zero or more digits followed by a dot (.) followed by one or more digits. Both integers and real numbers may be preceded by a "-" or "+" to indicate the sign. -0 is equivalent to 0 and is not a negative number.

Note that many properties that allow an integer or real number as a value actually restrict the value to some range, often to a non-negative value.

So basically there are no limitations for z-index value in the CSS standard, but I guess most browsers limit it to signed 32-bit values (−2147483648 to +2147483647) in practice (64 would be a little off the top, and it doesn't make sense to use anything less than 32 bits these days)

Css – z-index not working with fixed positioning

Add position: relative; to #over

    #over {
      width: 600px;
      z-index: 10;
      position: relative;    
    }
    
    #under {
      position: fixed;
      top: 5px;
      width: 420px;
      left: 20px;
      border: 1px solid;
      height: 10%;
      background: #fff;
      z-index: 1;
    }

    <!DOCTYPE html>
    <html>
    <body>
    	<div id="over">
    		Hello Hello HelloHelloHelloHelloHello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello
    	</div>  
    
    	<div id="under"></div>
    </body>
    </html>

Fiddle

Best Answer

Related Solutions

Html – Minimum and maximum value of z-index

Css – z-index not working with fixed positioning

Related Topic