有没有办法让 div 后面的元素（链接）在 div 是“透明”的区域可点击答案

【问题标题】：Is there a way to have element behind a div (links) clickable in areas where the div is "transparent"有没有办法让 div 后面的元素（链接）在 div 是“透明”的区域可点击
【发布时间】：2010-05-02 08:38:49
【问题描述】：

我有一个绝对定位的块元素和页面上的其他一些定位固定的元素。效果是顶部的块漂浮在页面上，效果很好。

下方元素中的链接不可点击。它们不应该是当 div 的内容超过它们时，而是当透明的“边缘”区域超过链接时它们是可见的，但点击只注册到覆盖 div。

仅当填充覆盖 div 时才会出现问题。但是，如果我只依赖边距，浏览器会忽略底部边距，因此滚动不会向上足够高。为了解决这个问题，我求助于底部的填充。这就是问题所在。

有没有干净的方法解决这个问题？我意识到我可以将下面的元素加倍并放在上面，但不透明度设置为 0。然而，这是一个不受欢迎的解决方案。

问题示例：

<!DOCTYPE html>
<html lang='en' xml:lang='en' xmlns='http://www.w3.org/1999/xhtml'>
  <head>
    <style>
      #top, #bottom {
        position: fixed;
        border: 1 px solid #333;
        background-color: #eee;
        left: 100px;
        padding: 8px;
      }
      #top {
        top: 0;
        z-index: 1;
      }
      #bottom {
        bottom: 0;
        z-index: 2;
      }
      #contentWrapper {
        position: absolute;
        margin: 100px 0 0 0;
        /* Padding is used to make sure the scroll goes up further on the page */
        padding: 0 0 100px 0;
        width: 600px;
        z-index: 3;
      }

      #content {
        border: 1 px solid #333;
        background-color: #eee;
        height: 1000px;
      }
    </style>
  </head>
  <body>
    <div id='top'><a href="#">Top link</a></div>
    <div id='bottom'><a href="#">Bottom link</a></div>
    <div id='contentWrapper'>
      <div id='content'>Some content</div>
    </div>
  </body>
</html>

【问题讨论】：

标签： javascript html css

【解决方案1】：

问题是你的填充。顶部的链接仍然是可点击的，因为您的内容上的margin 取代了它，这意味着当用户滚动到正确的位置时，您的元素不再覆盖您的链接。使用padding-bottom，元素被扩展并且元素覆盖了底部的链接。因此在考虑问题时找到了解决方案：我们如何在不使用#contentWrapper的情况下扩展页面可以滚动到的位置？

这是一种无论您的内容高度如何都可以工作的解决方案：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <style>
    #top, #bottom {
        position: fixed;
        background-color: #00F;
        left: 100px;
        padding: 8px;
    }
    #top {
        top: 0;
    }
    #bottom {
        bottom: 0;
    }
    #contentWrapper {
        position: absolute;
        margin: 100px 0 0 0;
        width: 600px;
        z-index: 10000;
        overflow: visible;
    }
    #heightFix {
        position: absolute;
        bottom: -100px;
        height: 0;
        overflow: hidden;
        font-size: 0;
    }

    #content {
        background-color: #F00;
        height: 1000px;
    }
    </style>
  </head>
  <body>
    <div id="top"><a href="#">Top link</a></div>
    <div id="bottom"><a href="#">Bottom link</a></div>
    <div id="contentWrapper">
      <div id="heightFix"></div>
      <div id="content">Some content</div>
    </div>
  </body>
</html>

【讨论】：

谢谢，我尝试过类似的方法，但之后创建一个元素会起作用。遗憾的是，内容大小会随着页面的生命周期而变化，但半秒计时器上的 setInterval 可以调整第二个修复块的位置。
这是一个可怕的想法。 JavaScript 只是为了让你的 CSS 工作？不，谢谢。请改用此编辑和第二种解决方案。
哦，是的，Javascript 不是我想要的方式，无论如何我尝试后不久就放弃了它，我嘴里的味道太差了。所以是的，这非常有效！谢谢，谢谢，谢谢，我在这个愚蠢的问题上花了太多时间。我有点好奇为什么这会起作用。嵌套的绝对定位元素是否相对于它们的容器定位？
是的，我相信是这样的：绝对定位“生成一个绝对定位的元素，相对于第一个具有非静态位置的父元素定位。” [w3schools.com/css/pr_class_position.asp]

【解决方案2】：

据我所知，您可以这样做的唯一方法是处理覆盖<div> 上的事件，并使用事件中的鼠标坐标来确定触发哪个链接。甚至考虑这样做都让我感到不舒服，但这是可能的。早在我接近尝试之前，我就努力想出一种更好的方法来定位顶层，这样就不需要填充了。

【讨论】：

是的，这正是我的感受。做一些看起来像是在利用 HTML 的令人讨厌的事情似乎不是一个好的解决方案。

【解决方案3】：

尝试使覆盖的 div 尽可能小。

或者更具体地说，如果“清晰”部分的形状是“方形”，那么您可能可以从多个较小的 div 中创建浮动区域。这将使“透明”区域实际上“无 div”，因此这些区域中的链接将是可点击的。

我认为不可能通过 div 以任何其他方式使链接可点击？

【讨论】：