How to bring an iframe to the fore

Question

I have an iframe problem on a page surrounded by headers and footers.

There is a div in the header that overrides the iframe (in blue below).

The div logo with id looks like this:

#logo { z-index: 9998; position: absolute; top: 10px; left: 0px; } 

The white part of the page is an iframe.

  <iframe src="somepage" scrolling="auto" class="study-iframe" style="height:700px;"></iframe> 

The words "What does a course attribute mean?" are a link.

  <div id="Attr1View1"> <p> <a href="javascript:Toggle2Views('Attr1View2', 'Attr1View1')"> <font class="LinkNoUnderline">+ </font> <font class="LinkNoUnderlineText">What does a course attribute mean?</font> </a> </p> </div> 

When I click on the area covered by the blue rectangle, nothing happens.

when I click on the area outside the blue rectangle, the link works.

How can I get links on this page in front so you can always click on them?

thanks

Answer 1

Layout Using the layout Make sure that you are not using Positions, as this will make the web page disoriented in other browsers and screen resolutions.

IFrame If you are going to save your layout using positions, then an easy way to do this would be ...

 iframe{ width:100px; height:100px; position:absolute; z-index: 9999; } 

Please do not set the location.