Menu
I have a youtube iframe element in my website, but it's next to my menu items. When I hover over a menu item, a submenu opens that partially covers the iframe (because of it's position, that's not it's specific function obviously). This works fine in Firefox, but as usual, it doesn't in IE, here the iframe covers the menu, making it basically unreadable. Is there an option I need to add to the iframe to make it work or is it just plain impossible?
(Testing with IE9 at the moment)
235
To get around this we use the z-index property of CSS. This property only works on elements that have been positioned, as we have done with each IFrame, in that it has been placed within an absolutely positioned HTML div element. Z-index facilitates the display order (or 'stack' order) of elements on a page.
To sum up, most issues with z-index can be solved by following these two guidelines: Check that the elements have their position set and z-index numbers in the correct order. Make sure that you don't have parent elements limiting the z-index level of their children.
The z-index of elements inside of a stacking context are always relative to the parent's current order in its own stacking context.
No, it isn't inherited. You can see it in MDN article. However, be aware that z-index sets the z-position relatively to the stacking context. And a positioned element with non auto z-index will create an stacking context.
Try using Youtubes iframe embed method (if thats not what you are already doing, and add: ?wmode=transparent to the url (replace ? with & if it is not the first url variable)
95
There are several issues with this question. First of all, there is no problem in IE to set an iframe above or below other content in your document using z-index. Higher z-index makes your iframe above other elements, (as usual), as far as your iframe is positioned: relative, absolute or fixed.
The real problem comes when the content of your iframe is a flash embedded object. In this case, the flash object can only be z-positioned if its wmode parameter is set to "transparent" or "opaque", but it will not work if the flash is included in the HTML document using wmode = "window".
So if you are including an external resource (in a website you don't have access, like youtube), you can only achieve it if any of those modes are used. If you are loading a flash object in a iframe in which you can modify its content, just check that:
<param name="wmode" value="transparent" />
is set.
In case youtube is using "window" mode, you can always use your own flash player and hook youtube videos dynamically, setting your flash object mode to transparent.
31
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
