I have a Flash header with a transparent background contained inside of a relative positioned div with a z-index of 10. The resulting effect allows my Flash movie with a transparent windowmode to overlap and hover over the HTML content. Unfortunately, the HTML that is underneath the invisible Flash is not accessible. For example, the anchors will not work. An example can be found here. Notice how the very top of the anchor links don't activate the hover state? I've seen Flash rollovers overlapping HTML content before,and the HTML still worked like normal… What am I doing wrong?
Html – How to make HTML underneath overlapping Flash accessible
cssflashxhtml
Related Topic
- Html – How to make a div not larger than its contents
- Html – Flex movie overlapping other HTML
- Html – How to make a div 100% height of the browser window
- Html – How to enable HTML content on top of Flash content without the frame rate dropping
- Html – How to make a placeholder for a ‘select’ box
- Css – How to make Twitter Bootstrap menu dropdown on hover rather than click
- Css – How to make Bootstrap columns all the same height
Best Answer
As far as I know, there is no way to prevent this. Overlapping transparent images and Flash have no way of doing per-pixel click-through. You have two options, make the entire site Flash, or get creative with the HTML.
For example, your "gear" buttons could be split up in to two parts; an underlying image that has a lower z-index than the Flash header, and the
<a>tag can be given a higher z-index so the actual clickable area of the link is hovering invisibly over everything else.To do this you'll need to take a few things into consideration:
<div>is responsible for housing the image, you could use an<img>or abackground-imagestyle.<div>and<a>tags must be separate, not nested within a container<a>must be styled withdisplay:block;so that it can be given a width and a height<div>and<a>must be the same height and width