針對低z索引元素的Onclick用法

這是我的問題 - 我需要以某種方式訪問由更高z-index的另一元素覆蓋的項目的onclick。我知道這是違背Z指數的點，但任何想法？針對低z索引元素的Onclick用法

在下面的例子中，只有紅色小方塊的頂部可以點擊。我有一個網頁設計，其中需要點擊的選項卡被一個藝術性的酒吧所覆蓋...如果有一種方法（也許是一些JavaScript技巧？），我會喜歡使用onclick這些模糊的，較低的z-index元素改變任何定位，雖然我的直覺感覺不好。

<html> 
<head> 
    <style type="text/css"> 

     #bg { 
      position:absolute; 
      width:500px; 
      height:500px; 
      background:pink; 
     } 
     #under { 
      cursor:pointer; 
      margin-top:-10px; 
      background:red; 
      width:50px; 
      height:50px; 
      z-index:0; 
     } 
     #over { 
      position:absolute; 
      width:900px; 
      height:50px; 
      margin-top:10px; 
      z-index:100; 
     } 
    </style> 
</head> 
<body> 
    <div id="bg"> 
     <div id="under" onclick="alert('hi');">aaa</div> 
    </div> 
    <div id="over"></div> 
</body>

來源

2010-09-24 Amalgovinus

我會用一個透明的PNG做以上相同尺寸的可點擊的最低的z-index DIV藝術氣息的酒吧DIV中。

請注意Internet Explorer問題。

我多次使用該技術。

來源

2010-09-24 02:24:15 nottinhill

謝謝你給我答案。讓我們知道它是否有效。 – nottinhill 2010-09-25 19:13:02

通常的替換方法是將「over」元素（絕對定位）放置在「下」元素內（相對或絕對定位）並使內容具有相同的大小（Gilder/Levin Image Replacement）。

來源

2010-09-24 02:35:10

但是一個元素不能有比它的父母更高的z-index .. – Amalgovinus 2010-09-24 20:55:30

哦，是的，它可以。網頁上可見的所有內容都是body元素的後代，並且您可以將頁面上的元素設置爲比body更高的z-index。在過去的十多年中，我個人建立了許多網站，使用這種方法，因爲它是引入時唯一可以進行圖像替換的圖像/關閉/ css可訪問方法。 – 2010-09-24 22:24:36

我很困惑，似乎一個元素不能有比它的父母更低的z-index。 – Amalgovinus 2011-03-22 01:22:04

針對低z索引元素的Onclick用法

回答

相關問題