javascript - 有没有办法让 div 后面的元素(链接)在 div 为 "transparent"的区域可点击-6ren

javascript - 有没有办法让 div 后面的元素(链接)在 div 为 "transparent"的区域可点击

转载作者：行者123 更新时间：2023-11-27 22:35:07

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

下方底部元素中的链接不可点击。当 div 的内容覆盖它们时，它们不应该出现，但是当透明的“边缘”区域位于链接上方时，它们是可见的，但点击只会注册到覆盖的 div。

只有当 padding 覆盖了 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>

最佳答案

问题是你的填充。顶部的链接仍然可以点击，因为内容上的 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>