2012-11-21 30 views
4

我在包含頁眉和頁腳的頁面上的iframe存在問題。如何將iframe帶到前面

頭部中有一個與iframe重疊的div(以下藍色)。
enter image description here

用的ID標識的股利如下:

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

頁面的白色部分是一個iframe。

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

「課程屬性是什麼意思?」是一個鏈接。

 <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> 

當我點擊一個藍色矩形所覆蓋的區域時,什麼都不會發生。

當我點擊藍色矩形外部的區域時,鏈接起作用。

如何強制將此頁面上的鏈接置於前面,以便您始終可以點擊它們?

感謝

+1

答案:不要對佈局使用絕對定位。 –

+0

設置iframe的z-index高於徽標 – kingkode

+1

這不是一個鏈接問題,就像Diodeus說的那樣,這是由於絕對定位造成的佈局問題,無論哪種方式,我頭頂最簡單的解決方案都是設置一個固定的高度在與標題高度相等的藍色div上。請評論,如果它不起作用,我會把它變成小提琴,看看我能找到一個修復。 –

回答

3

佈局 的佈局確保您不使用的位置,因爲它會讓其他瀏覽器和屏幕分辨率的網頁迷失方向。

的IFrame 如果您要使用的位置,然後一個簡單的方法來做到這將是...

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

保持你的佈局,請從定位佈局約束。

+0

有些系統需要使用定位。這應該解決;你的第二個解決方案很好,但重新考慮第一個。 – ArtOfCode

+0

@ArtOfCode爲什麼你是這麼對,但我只提交了1個解決方案,這是專門用於他的原始代碼,但第二個解決方案是一個建議。 – user3704599

+0

此外,我認爲他/她使用絕對定位,以便元素可以彼此相鄰,但更動態的方法是有一個1024像素或更小的包裝,並將其中的元素具有Float:left;或顯示:嵌入塊; :) – user3704599