Question

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

底部底部元素中的链接不可点击。它们不应该是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>

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

Answer 2

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

Answer 3

尝试使覆盖div尽可能小。

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

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

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

3 个答案: